CSS Float. Grilă de Boxes / Boxes de lățime egală. Imagini împreună.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Exemplu:
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; / * trei cutii (utilizați 25% pentru patru și 50% pentru două, etc.) * /
padding: 50px; / * dacă doriți spațiu între imagini * /
}
Ce este box-sizing?Puteți crea cu ușurință trei cutii plutitoare (floating boxes) una lângă alta. Cu toate acestea, când adăugați ceva care mărește lățimea fiecărei cutii (de exemplu, padding sau borders), caseta se va rupe. Proprietatea de dimensionare a cutiei ne permite să includem padding și border în lățimea totală (și înălțimea) a cutiei, asigurându-ne că padding rămâne în interiorul cutiei și că nu se rupe.
Imagini Impreuna (Images Side By Side)
Grila casetelor poate fi de asemenea folosită pentru a afișa imagini side by side:
Exemplu:
.img-container {
float: left;
width: 33.33%; / * trei recipiente (utilizați 25% pentru patru, și 50% pentru două, etc) * /
padding: 5px; / * dacă doriți spațiu între imagini * /
}