Wyświetlanie elementów

workshop: #22c2-dsp-inl-blk.html

Mini-warsztat CSS: wyświetlanie elementów

Przykłady różnego zachowania elementów w zależności od sposobu ich wyświetlania.

Przygotuj 8 węzłów P oraz selektor: .step p z regułami:
background-color: #737373; color: #e3dcff; font-weight: 800; margin: 0px; padding: 0px; text-align: center;
Przygotuj selektor klasy: dspInl z regułami:
border: solid 1px lightblue; background-color: #cff0fb !important; display: inline; width: 60px;
Przygotuj selektor klasy: dspBlk z regułami:
border: solid 1px #737373; background-color: #e3dcff !important; display: block;
Przygotuj selektor klasy: dspIB z regułami:
border: solid 1px #ececec; background-color: #fdffdf !important; display: inline-block; width: 60px;
Przygotuj selektor klasy: flxCntr z regułami: display: flex; flex-flow: row wrap; justify-content: space-around;
oraz flxItem z regułami: background-color: #bbe387 !important; color: black !important; width: 60px;

.b1 30%

.b2 20%

.b3 50%

.b4 100%

.b5 50%

.clrFix::after {
	content: "";
	clear: both;
	display: block;
}

Klasę clrFix należy dodać do ostatniej Sekcji

float: left + clearFix

.b1 30%

.b2 20%

.b3 50%

.b4 100%

.b5 50%