Crearea de casete cu lățime egală
Cu proprietatea float, este ușor să faceți casete de conținut să plutească una lângă alta.
Ce este box-sizing? Când adăugați padding sau chenare, o casetă plutitoare se poate rupe pe o nouă linie. Proprietatea box-sizing include padding-ul și chenarul în lățimea și înălțimea totală a casetei, astfel încât așezarea nu se strică.
Exemplu
Trei casete plutesc una lângă alta la o treime din lățime fiecare, cu box-sizing: border-box menținând padding-ul în interior.
<style> intern, setați box-sizing la border-box pentru *, apoi creați o clasă .box care plutește la stânga, are lățimea de 33.33%, are padding și un chenar. Adăugați trei casete astfel încât să stea una lângă alta fără să strice așezarea.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
padding: 50px; /* if you want space between the boxes */
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</body>
</html>
Imagini una lângă alta
Aceeași grilă de casete plutitoare poate fi folosită pentru a afișa imagini una lângă alta.
Exemplu
Trei containere de imagini plutesc una lângă alta la o treime din lățime fiecare.
<style> intern, setați box-sizing la border-box pentru *, apoi creați o clasă .img-container care plutește la stânga, are lățimea de 33.33%, cu padding mic. Puneți o casetă colorată (înlocuitor pentru imagine) în interiorul fiecăreia. Adăugați trei containere.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.img-container {
float: left;
width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
padding: 5px; /* if you want space between the images */
}
.img {
width: 100%;
height: 150px;
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="img-container"><div class="img"></div></div>
<div class="img-container"><div class="img"></div></div>
<div class="img-container"><div class="img"></div></div>
</body>
</html>
Crearea de casete cu înălțimi egale
Nu este ușor să faci casetele plutitoare la aceeași înălțime când conținutul lor diferă. O soluție rapidă este să setați o înălțime fixă pentru casete.
Exemplu
O înălțime fixă de 500px menține casetele plutitoare la aceeași înălțime chiar și cu conținut diferit.
<style> intern, setați box-sizing la border-box pentru *, creați o clasă .box care plutește la stânga cu lățime de 33.33%, cu padding și un chenar, și dați casetelor o înălțime fixă de 500px astfel încât toate să corespundă. Adăugați două casete cu cantități diferite de text.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 20px;
border: 1px solid #4CAF50;
height: 500px;
}
</style>
</head>
<body>
<div class="box">
<h2>Box 1</h2>
<p>Some short content.</p>
</div>
<div class="box">
<h2>Box 2</h2>
<p>More content here. Even though the two boxes have different amounts of text, the fixed height of 500px keeps them the same height.</p>
</div>
</body>
</html>
Meniu de navigare
De asemenea, puteți folosi float pentru a construi un meniu de navigare, făcând să plutească elementele listei astfel încât linkurile să stea unul lângă altul. PromptCookbook leagă la un exemplu complet pentru acest lucru.
Toate proprietățile CSS Float
Un rezumat al proprietăților legate de float:
box-sizing— stabilește cum sunt calculate lățimea și înălțimea totală a unui element.clear— stabilește ce se întâmplă cu elementul de lângă un element plutitor.float— stabilește dacă și cum plutește un element.overflow— stabilește ce se întâmplă când conținutul depășește un element.