Bir xil balandlik
CSS yordamida bir xil balandlikdagi ustunlar yaratishni o‘rganing.
Bir xil balandlikdagi ustunlar qanday yaratiladi
Yonma-yon joylashishi kerak bo‘lgan ustunlar bo‘lsa, ko‘pincha ularning balandligi bir xil bo‘lishini (eng baland ustunning balandligiga mos kelishini) xohlaysiz.
Muammo:
Istalgan natija:
1-qadam) HTML qo‘shing:
Misol
<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>
2-qadam) CSS qo‘shing:
Misol
.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 */
}
O‘zingiz sinab ko‘ring »
Moslashuvchan bir xil balandlik
Oldingi misolda yaratgan ustunlarimiz moslashuvchan (agar "O‘zingiz sinab ko‘ring" misolida brauzer oynasi o‘lchamini o‘zgartirsangiz, ular kerakli kenglik va balandlikka avtomatik moslashishini ko‘rasiz). Biroq kichik ekranlarda (masalan, smartfonlarda) ularni gorizontal emas, vertikal tarzda ustma-ust joylashtirishni xohlashingiz mumkin:
O‘rta va katta ekranlarda:
Hello World.
Hello World.
Hello World.
Hello World.
Hello World.
Kichik ekranlarda:
Hello World.
Hello World.
Hello World.
Hello World.
Hello World.
Bunga erishish uchun media so‘rov qo‘shing va bu qachon sodir bo‘lishi kerakligini belgilovchi chegara nuqtasi (breakpoint) qiymatini pikselda ko‘rsating:
Misol
/* 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%;
}
}
O‘zingiz sinab ko‘ring »
Flexbox yordamida bir xil balandlik va kenglik
Bir xil balandlikdagi bloklar yaratish uchun Flexbox’dan ham foydalanishingiz mumkin:
Misol
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
O‘zingiz sinab ko‘ring »
Eslatma: Flexbox Internet Explorer 10 va undan oldingi versiyalarda qo‘llab-quvvatlanmaydi.
Maslahat: Moslashuvchan bloklar (flexible boxes) haqida CSS Flexbox darsligimizda batafsil o‘qing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!