Karışık sütun düzeni nasıl oluşturulur
- Önceki Sayfa Listeleme Ağ Görünümü
- Sonraki Sayfa Sütun Kartları
CSS ile karışık sütun düzeni ağı nasıl oluşturulur öğrenin.
Bir yanıtlayıcı sütun düzeni oluşturma nasıl öğrenilir, bu düzen dört, iki ve tam genişlik sütunları arasında değişebilir.
Tarayıcı penceresinin boyutunu ayarlayarak yanıtlayıcı etkisini görebilirsiniz:
Karışık sütun düzeni nasıl oluşturulur
İlk adım - HTML ekleyin:
<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
İkinci adım - CSS ekleyin:
Bu örnekte, 900 piksel genişlik altındaki ekranlarda iki sütun haline gelen dört sütunlu bir düzen oluşturacağız. Ancak, 600 piksel genişlik altındaki ekranlarda sütunlar yanyana değil, yığın halinde yer alır.
/* Dört eşit genişlikte sütun oluşturur, hepsini bir araya akıtır */
.column {
float: left;
width: 25%;
}
/* Akış temizleme */
.row:after {
content: "";
display: table;
clear: both;
}
/* Yanıtlayıcı düzen - Dört sütun yerine iki sütun haline gelir */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Yanıtlayıcı düzen - İki sütunu yanyana değil, yığın halinde yapar */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
İlgili Sayfalar
Eğitim:CSS Web Sitesi Düzeni
- Önceki Sayfa Listeleme Ağ Görünümü
- Sonraki Sayfa Sütun Kartları
