Le inline-block Valeur
Il a été possible pendant une longue période pour créer une grille de cases qui remplit la largeur du navigateur et enroule bien (lorsque le navigateur est redimensionnée), en utilisant le float propriété.
Cependant, le inline-block valeur de l' display propriété rend encore plus facile.
inline-block éléments sont comme les éléments en ligne , mais ils peuvent avoir une largeur et une hauteur.
Exemples
L'ancienne façon - en utilisant float (remarquons que nous avons aussi besoin de spécifier une clear propriété pour l'élément après que les boîtes flottantes):
Exemple
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
} Essayez - le vous - même » Le même effet peut être obtenu en utilisant le inline-block valeur de l' display propriété (notez que pas clear la propriété est nécessaire):
Exemple
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
} Essayez - le vous - même »