Yonma-yon jadvallar
CSS yordamida yonma-yon jadvallar yaratishni o‘rganing.
Jadvallar yonma-yon qanday joylashtiriladi
CSS’ning float xossasi yordamida yonma-yon jadvallarni qanday yaratish mumkin:
Misol
* {
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;
}
O‘zingiz sinab ko‘ring »
CSS’ning flex xossasi yordamida yonma-yon jadvallarni qanday yaratish mumkin:
Misol
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
O‘zingiz sinab ko‘ring »
Eslatma: Flexbox Internet Explorer 10 va undan oldingi versiyalarda qo‘llab-quvvatlanmaydi. float yoki flex’dan foydalanish o‘zingizga bog‘liq. Biroq IE10 va undan oldingi versiyalarni qo‘llab-quvvatlash kerak bo‘lsa, float’dan foydalanganingiz ma’qul.
Maslahat: Moslashuvchan bloklar maketi moduli (Flexbox) haqida ko‘proq bilish uchun CSS Flexbox bo‘limimizni o‘qing.
Moslashuvchanlik qo‘shish
Yuqoridagi misol mobil qurilmada yaxshi ko‘rinmaydi, chunki ikki ustun sahifada juda ko‘p joy egallaydi. Mobil qurilmalarda ikki ustunli maketdan to‘liq kenglikdagi maketga o‘tadigan moslashuvchan jadval yaratish uchun quyidagi media so‘rovlarni qo‘shing:
Misol
/* 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%;
}
}
O‘zingiz sinab ko‘ring »
Maslahat: Jadvallarga qanday uslub berish haqida ko‘proq bilish uchun CSS jadvallar darsligimizga o‘ting.
Maslahat: float xossasi haqida ko‘proq bilish uchun CSS Float darsligimizga o‘ting.
Maslahat: flex xossasi haqida ko‘proq bilish uchun CSS Flexbox darsligimizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!