Hoe OM - Gelyke Hoogte
Leer hoe om kolomme met dieselfde hoogte met CSS te skep.
Hoe om kolomme van gelyke hoogte te skep
Wanneer jy kolomme het wat langs mekaar moet verskyn, sal jy dikwels wil hê hulle moet ewe hoog wees (wat ooreenstem met die hoogte van die hoogste).
Die probleem:
Die begeerte:
Stap 1) Voeg HTML by:
Voorbeeld
<div class="col-container">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
Stap 2) Voeg CSS by:
Voorbeeld
.col-container {
display: table; /* Make the
container element behave like a table */
width: 100%; /*
Set full-width to expand the whole page */
}
.col {
display: table-cell; /* Make elements inside the container behave like table
cells */
}
Responsiewe gelyke hoogte
Die kolomme wat ons in die vorige voorbeeld gemaak het, reageer (as jy die grootte van die blaaiervenster in die probeer dit-voorbeeld verander, sal jy sien dat hulle outomaties aanpas by die nodige breedte en hoogte). Maar vir klein skerms (soos slimfone), wil jy dalk hê hulle moet vertikaal in plaas van horisontaal stapel:
Op medium en groot skerms:
Hello Wêreld.
Hello Wêreld.
Hello Wêreld.
Hello Wêreld.
Hello Wêreld.
Op klein skerms:
Hello Wêreld.
Hello Wêreld.
Hello Wêreld.
Hello Wêreld.
Hello Wêreld.
Om dit te bereik, voeg 'n medianavraag by en spesifiseer 'n breekpunt pixelwaarde vir wanneer dit moet gebeur:
Voorbeeld
/* If the browser window is smaller than 600px, make the columns stack on top
of each other */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
Gelyke hoogte en breedte met Flexbox
Jy kan ook Flexbox gebruik om bokse met gelyke hoogte te skep:
Voorbeeld
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Let wel: Flexbox word nie in Internet Explorer 10 en vroeër weergawes ondersteun nie.
Wenk: Lees meer oor buigsame bokse in ons CSS Flexbox-tutoriaal .