Yonma-yon rasmlar
CSS yordamida rasmlarni yonma-yon joylashtirishni o‘rganing.
Yonma-yon rasmlar galereyasi
Rasmlar yonma-yon qanday joylashtiriladi
1-qadam) HTML qo‘shing:
Misol
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
2-qadam) CSS qo‘shing:
CSS’ning float xossasi yordamida yonma-yon rasmlarni qanday yaratish mumkin:
Float misoli
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
O‘zingiz sinab ko‘ring »
CSS’ning flex xossasi yordamida yonma-yon rasmlarni qanday yaratish mumkin:
Flexbox misoli
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
O‘zingiz sinab ko‘ring »
Eslatma: Flexbox Internet Explorer 10 va undan oldingi versiyalarda qo‘llab-quvvatlanmaydi. Uch ustunli maket yaratish uchun 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
Ixtiyoriy ravishda, muayyan ekran kengligida rasmlar yonma-yon turish o‘rniga ustma-ust joylashishi uchun media so‘rovlar qo‘shishingiz mumkin.
Quyidagi misol kengligi 500px yoki undan kichik ekranlarda rasmlarni vertikal ravishda ustma-ust joylashtiradi:
Moslashuvchan misol
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
O‘zingiz sinab ko‘ring »
Media so‘rovlar haqida ko‘proq bilish uchun CSS media so‘rovlar darsligimizni o‘qing.
Tegishli sahifalar
Rasmlarga qanday uslub berish haqida ko‘proq bilish uchun CSS rasmlar darsligimizni o‘qing.
CSS Float haqida ko‘proq bilish uchun CSS Float darsligimizni o‘qing.
CSS yordamida rasmlar galereyasini qanday yaratishni bilish uchun CSS rasmlar galereyasi darsligimizni o‘qing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!