Float misollari

Teng kenglikdagi qutilar yaratish

float xossasi bilan kontent qutilarini yonma-yon suzdirish oson:

Box 1

Box 2

Box 1

Box 2

Box 3

Misol

* {
box-sizing: border-box;
}

.box {
float: left;
width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
padding: 50px; /* if you want space between the images */
}

O‘zingiz sinab ko‘ring »

box-sizing nima?

Yonma-yon uchta suzuvchi qutini oson yaratish mumkin. Biroq har bir quti kengligini kattalashtiradigan narsa (padding yoki chegaralar kabi) qo‘shsangiz, quti buzilishi mumkin. box-sizing xossasi padding va chegarani qutining umumiy kengligiga (va balandligiga) kiritish imkonini beradi — padding quti ichida qolishi va quti buzilmasligini ta’minlaydi.

Siz box-sizing xossasi haqida CSS Box Sizing bobimizda batafsil o‘qishingiz mumkin.

Yonma-yon rasmlar

Qutilar to‘ri rasmlarni yonma-yon ko‘rsatish uchun ham ishlatilishi mumkin:

Misol

.img-container {
float: left;
width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
padding: 5px; /* if you want space between the images */
}

O‘zingiz sinab ko‘ring »

Teng balandlikdagi qutilar yaratish

Oldingi misolda qutilarni teng kenglikda yonma-yon suzdirishni o‘rgandingiz. Biroq teng balandlikdagi suzuvchi qutilar yaratish oson emas. Tez yechim — quyidagi misoldagi kabi qat’iy balandlik belgilash:

Box 1

Ba’zi tarkib, ba’zi tarkib, ba’zi tarkib

Box 2

Ba’zi tarkib, ba’zi tarkib, ba’zi tarkib

Misol

.box {
height: 500px;
}

O‘zingiz sinab ko‘ring »

Biroq bu juda moslashuvchan emas. Qutilarda har doim bir xil miqdorda kontent bo‘lishiga kafolat bera olsangiz — ok. Lekin ko‘p hollarda kontent bir xil bo‘lmaydi. Yuqoridagi misolni telefonda sinasangiz, ikkinchi quti kontenti qutidan tashqarida ko‘rsatilganini ko‘rasiz. Mana shu yerda CSS Flexbox foydali — u qutilarni eng uzun quti uzunligida avtomatik cho‘zishi mumkin:

Misol

Moslashuvchan qutilar yaratish uchun Flexbox’dan foydalanish:

1-quti - Bu kontent haqiqatan ham baland bo‘lishini ta’minlash uchun yozilgan matn. Bu kontent haqiqatan ham baland bo‘lishini ta’minlash uchun yozilgan matn. Bu kontent haqiqatan ham baland bo‘lishini ta’minlash uchun yozilgan matn.

2-quti - Mening balandligim 1-qutinikiga moslashadi.

O‘zingiz sinab ko‘ring »

Maslahat: Siz Flexbox Layout moduli haqida CSS Flexbox bobimizda ko‘proq bilib olishingiz mumkin.

Navigatsiya menyusi

Gorizontal menyu yaratish uchun float ni giperhavolalar ro‘yxati bilan ham ishlatishingiz mumkin:

O‘zingiz sinab ko‘ring »

CSS Float xossalari

Xususiyat	Tavsif
box-sizing	Elementning kengligi va balandligi qanday hisoblanishini belgilaydi: ular to‘ldirish va chegaralarni o‘z ichiga oladimi yoki yo‘qmi
clear	Suzuvchi element yonida joylashgan element bilan nima sodir bo‘lishini belgilaydi
float	Element chapga, o‘ngga yoki umuman suzmasligi kerakligini belgilaydi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish