Nasıl Yapılır - Eşit Yükseklik
CSS ile eşit yükseklikte sütunlar oluşturmayı öğrenin.
Eşit Yükseklikte Sütunlar Nasıl Oluşturulur
Yan yana görünmesi gereken sütunlarınız olduğunda, genellikle bunların eşit yükseklikte (en uzun olanın yüksekliğiyle eşleşen) olmasını istersiniz.
Sorun:
Arzu:
Adım 1) HTML'yi ekleyin:
Örnek
<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>
Adım 2) CSS'yi ekleyin:
Örnek
.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 */
}
Duyarlı Eşit Yükseklik
Önceki örnekte oluşturduğumuz sütunlar duyarlıdır (deneyin örneğinde tarayıcı penceresini yeniden boyutlandırırsanız, gerekli genişlik ve yüksekliğe otomatik olarak ayarlandıklarını göreceksiniz). Ancak, küçük ekranlar (akıllı telefonlar gibi) için yatay yerine dikey olarak istiflenmesini isteyebilirsiniz:
Orta ve büyük ekranlarda:
Selam Dünya.
Selam Dünya.
Selam Dünya.
Selam Dünya.
Selam Dünya.
Küçük ekranlarda:
Selam Dünya.
Selam Dünya.
Selam Dünya.
Selam Dünya.
Selam Dünya.
Bunu başarmak için bir medya sorgusu ekleyin ve bunun ne zaman olması gerektiğine ilişkin bir kesme noktası piksel değeri belirleyin:
Örnek
/* 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%;
}
}
Flexbox kullanarak Eşit Yükseklik ve Genişlik
Eşit yükseklikte kutular oluşturmak için Flexbox'ı da kullanabilirsiniz:
Örnek
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Not: Flexbox, Internet Explorer 10 ve önceki sürümlerde desteklenmez.
İpucu: CSS Flexbox Eğitimimizde esnek kutular hakkında daha fazla bilgi edinin .