Veb-sahifa tartibini loyihalash uchun CSS float funktsiyasidan foydalanish
CSS xususiyati tartib uchun juda muhim xususiyatdir. Veb-sahifa dizayni siz ko'rsatmoqchi bo'lganidek, ularni joylashtirishga imkon beradi - lekin uni ishlatish uchun uni qanday ishlashini tushunishingiz kerak.
Uslub sahifasida CSS float xususiyati quyidagicha ko'rinadi:
to'g'ridan-to'g'ri {float: o'ng; }
Bu brauzerga "o'ngdagi" toifadagi hamma narsani o'ngga surish kerakligini aytadi.
Siz shunday qilmoqchisiz:
class = "o'ng" />
CSS float xususiyati bilan nimani o'stira olasiz?
Veb-sahifadagi har bir elementni float qila olmaysiz. Siz blok darajasidagi elementlarni faqat suzib olasiz. Bu sahifada tasvirlar (), paragraflar (), bo'linmalar () va ro'yxatlar () kabi bo'sh joy bloklarini o'z ichiga olgan elementlar.
Matnni ta'sir qiladigan, ammo sahifadagi qutini yaratmaydigan boshqa elementlarga inline elementlar deyiladi va ularni suratga olish mumkin emas. Ular span (), line breaks (), kuchli diqqat () yoki kursiv () kabi elementlardir.
Ular qayerda?
O'ngga yoki chapga elementlarni surishingiz mumkin. Yuzagan elementni ta'qib qilgan har qanday element boshqa tarafdagi suzuvchi element atrofida oqadi.
Misol uchun, agar rasmni chapga surib qo'yadigan bo'lsam, uning atrofidagi barcha matnlar yoki boshqa elementlar o'ng tomonga oqadi. Agar men tasvirni o'ngga surib qo'yadigan bo'lsam, undagi barcha matnlar yoki boshqa elementlar uning atrofiga oqib o'tadi. Brauzer tasvirlarni ko'rsatishga sozlangan bo'lsa, matn blokiga joylashtirilgan tasvirga hech qanday float uslubi kiritilmaydi.
Bu, odatda, rasmning pastki qismida ko'rsatilgan quyidagi matnning birinchi qatorida bo'ladi.
Ular qanchalik silkinglar?
Yig'ilgan element elementar konteyner elementining chap yoki o'ng tomoniga qadar harakat qiladi. Bu sizning kodingiz qanday yozilganligiga qarab turli xil holatlarga olib keladi.
Ushbu misollar uchun men chapda kichik DIV elementini suzaman:
- Yuzagan element oldindan aniqlanmagan kenglik bo'lmasa, kerak bo'lgandan ko'ra, gorizontal bo'sh joyni oladi va bu floatga qaram bo'lmasdan. Eslatma: ba'zi brauzerlar kengligi aniqlanmagan, odatda suzmagan elementni faqat kichik hajmdagi bo'sh joy berganda, suziladigan elementlarning yonida elementlarni joylashtirishga urinadi. Shunday qilib, suzuvchi elementlarning kengligini har doim belgilashingiz kerak.
- Agar konteyner element HTML element bo'lsa, suzilgan DIV sahifaning chap chetiga o'tiradi.
- Agar konteyner elementi boshqa narsaga ega bo'lsa, suzuvchi DIV konteynerning chap burchagiga o'tiradi.
- Yuzimli elementlarni joylashtirishingiz mumkin va bu shovqinning ajoyib joyga tushishiga olib kelishi mumkin. Masalan, bu suzuvchi o'ng tomonda joylashgan DIV ichidagi chap chetdagi DIV.
- Idishdagi xona bo'lsa, yuzaki elementlar bir-birining yonida o'tiradilar. Misol uchun, bu konteyner 400px kenglikdagi konteynerda uchta 100px kenglikdagi DIV elementlariga ega.
Foto galereyasi joylashuvini yaratish uchun hatto suzish vositalarini ham foydalanishingiz mumkin. Siz har bir eskizni (u bir xil o'lchamdagi eng yaxshi ishni bajarasiz), DIV-da pastki yozuv bilan va konteynerdagi DIV elementlarini surtishingiz mumkin.
Brauzer oynasining qanchalik kengligidan qat'i nazar, eskizlar bir xil tarzda tartiblanadi.
Float-ni o'chirib qo'yish
Biror elementni qanday qilib olish kerakligini bilganingizdan so'ng, qaymoqni qanday o'chirishni bilish muhimdir. CSS ochiq xususiyatiga ega floatni o'chirib qo'yasiz. Chap gavharlarni, suzuvchi suzgichlarni yoki har ikkisini tozalashingiz mumkin:
aniq: chap;
aniq: o'ng;
aniq: ikkalasi ham;
Tushunarli xususiyatni o'rnatgan har qanday element ushbu yo'nalishda yuzaga kelgan elementning ostiga ko'rinadi. Masalan, ushbu misolda matnning dastlabki ikki xatboshi o'chirilmaydi, lekin uchinchisi.
Turli xil tartiblash effektlarini olish uchun hujjatlaringizdagi turli xil elementlarning aniq qiymati bilan o'ynang.
Eng qiziqarli suzilgan tartiblarning biri matnning paragraflari yonidagi o'ng yoki chap ustundagi rasmlarning bir qatoridir. Matn tasvirni pastga aylantirish uchun etarlicha uzoq bo'lmasa ham, avvalgi tasvirning yonida emas, balki ustunda paydo bo'lishiga ishonch hosil qilish uchun barcha rasmlarni aniqroq qilishingiz mumkin.
HTML (bu xatni takrorlang):
Duvarlar sizni jiddiy jarohatdan qutqarib qolishadi. Buning ustiga, ishni bajarish uchun ishlash kerak.
CSS (tasvirlarni chapga surish uchun):
img.float {float: chap;
aniq: chap;
margin: 5px;
}
Va o'ngda:
img.float {float: o'ng;
aniq: o'ng;
margin: 5px;
}
Mizanpaj uchun Floats dan foydalanish
Float xususiyatining qanday ishlashini tushunganingizdan so'ng, uni veb-sahifalaringizni joylashtirish uchun foydalanishni boshlashingiz mumkin. Bu floatlangan veb-sahifa yaratish uchun men olgan qadamlar:
- Tartibni (qog'ozga yoki grafikani yoki boshimga) joylashtiring.
- Sahifa bo'linmalari qayerda bo'lishini aniqlang.
- Turli idishlar va ularning ichidagi elementlarning kengligini aniqlang.
- Har bir narsani o'stiring. Hatto eng tashqi konteyner elementi chapga suriladi, shuning uchun brauzer portiga nisbatan qayerda bo'lishini bilaman.
Mavzu tasniflari kengliklarini (foizlar yaxshi) bilganingizdagina siz float xususiyatidan ularni sahifaga tegishli joylarga qo'yish uchun foydalanishingiz mumkin. Yaxshi narsa, Internet Explorer yoki Firefox uchun farqli bo'lgan qutidagi model haqida qayg'urmasligingiz kerak.