CSS Էջատում
Դու կարող ես արկղերի ցանց սարքել։ Երկար ժամանակ սա հնարավոր էր անել float-ի օգնությամբ։ Ներկայումս inline-block -ի օգնությամբ դա ավելի հեշտ է։
inline-block էլեմենտները նման են inline էլեմենտներին, սակայն կարող են ունենալ լայնություն և բարձրություն: Արի նայենք երկու տարբերակների օրինակները։
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
Լողացող բլոկ !
</div>Լողացող բլոկ !
</div>Լողացող բլոկ !
</div>Լողացող բլոկ !
</div>Լողացող բլոկ !
</div>Լողացող բլոկ !
</div>Լողացող բլոկ !
</div>Լողացող բլոկ !
</div>Լողացող բլոկ !
</div>Լողացող բլոկ !
</div>Լողացող բլոկ !
</div>Այստեղ օգտագործված է clear, այդ պատճառով սա չի լողա վերին արկղերի հետևից։
</div>
Կարող ես ստանալ նույն էֆեկտը օգտագործելով display հատկության inline-block արժեքը։
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
սա inline-block է
</div>սա inline-block է
</div>սա inline-block է
</div>սա inline-block է
</div>սա inline-block է
</div>սա inline-block է
</div>սա inline-block է
</div>սա inline-block է
</div>սա inline-block է
</div>սա inline-block է
</div>
Այստեղ կարիք չկա օգտագործել clear։ Հրաշա՜լի է։
IE6 և IE7 դիտարկիչների համար inline-block-ով աշխատելիս հավելյալ աշխատանք կպահանջվի։ Դբա Լավը ;) Անցնենք առաջ։
