L' inline-block Valore
È stato possibile per un lungo tempo per creare una griglia di caselle che riempie la larghezza del browser e avvolge piacevolmente (quando viene ridimensionato il browser), utilizzando il float struttura.
Tuttavia, l' inline-block valore della display di proprietà rende questo ancora più facile.
inline-block elementi sono come elementi in linea, ma possono avere una larghezza e un'altezza.
Esempi
Il vecchio modo - usando float (notiamo che abbiamo anche bisogno di specificare una clear proprietà per l'elemento dopo le scatole galleggianti):
Esempio
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
} Prova tu stesso " Lo stesso effetto può essere ottenuto utilizzando l' inline-block valore della display di proprietà (si noti che non clear struttura è necessaria):
Esempio
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
} Prova tu stesso "