Ultimele tutoriale de dezvoltare web
 

CSS Aspect - inline-block


inline-block Valoare

A fost posibil pentru o lungă perioadă de timp pentru a crea o grilă de cutii care umple lățimea browser - ului și se înfășoară frumos (when the browser is resized) - float (when the browser is resized) , folosind float proprietate.

Cu toate acestea, inline-block valoarea display proprietate face acest lucru chiar mai ușor.

inline-block elemente sunt ca elemente inline , dar ele pot avea o lățime și o înălțime.

Exemple

Vechiul mod - folosind float (observați că avem nevoie , de asemenea , pentru a specifica o clear proprietate pentru elementul după cutiile plutitoare):

Exemplu

.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.after-box {
    clear: left;
}
Încearcă - l singur »

Același efect poate fi atins prin utilizarea inline-block valoarea de display proprietate (notice that no clear property is needed) de (notice that no clear property is needed) o (notice that no clear property is needed) :

Exemplu

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}
Încearcă - l singur »