Nasıl Yapılır - Yan Yana Tablolar
CSS ile yan yana tabloların nasıl oluşturulacağını öğrenin.
Masalar Yan Yana Nasıl Yerleştirilir
float
CSS özelliğiyle yan yana tablolar nasıl oluşturulur :
Örnek
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
flex
CSS özelliğiyle yan yana tablolar nasıl oluşturulur :
Örnek
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Not: Flexbox, Internet Explorer 10 ve önceki sürümlerde desteklenmez. Float veya flex kullanmak istiyorsanız size kalmış. Ancak, IE10 ve aşağı için desteğe ihtiyacınız varsa, float kullanmalısınız.
İpucu: Esnek Kutu Düzeni Modülü hakkında daha fazla bilgi edinmek için CSS Flexbox bölümümüzü okuyun .
Duyarlılık Ekle
İki sütun sayfada çok fazla yer kaplayacağından, yukarıdaki örnek bir mobil cihazda iyi görünmeyecektir. Mobil cihazlarda iki sütunlu bir düzenden tam genişlikli bir düzene geçmesi gereken duyarlı bir tablo oluşturmak için aşağıdaki medya sorgularını ekleyin:
Örnek
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
İpucu: Tablolara nasıl stil uygulanacağı hakkında daha fazla bilgi edinmek için CSS Tabloları Eğitimimize gidin .
İpucu: Float özelliği hakkında daha fazla bilgi edinmek için CSS Float Eğitimimize gidin .
İpucu: Flex özelliği hakkında daha fazla bilgi edinmek için CSS Flexbox Eğitimimize gidin .