Animal Trading cards

Eslatma: Agar ushbu g‘alati matn nima ekanligiga qiziqayotgan bo‘lsangiz, bu lorem ipsum deb nomlanadi. Aslida, bu dizaynerlar tomonidan ko‘pincha veb-sahifani birlamchi ko‘rinishini yaratayotganda foydalanadigan hech qanday ma’noga ega bo‘lmagan matn. Bu haqda bu yerdan https://loremipsum.io/ ko‘proq ma’lumot olishingiz mumkin (va o‘zingizning "lorem ipsum" matningizni yaratishingiz mumkin).
3-savol
Matnli paragraf qo‘shganingizda nima bo‘ladi?


Izoh:
Bu holatni o‘ng tomonda suzib yuruvchi qutilar va ularning atrofida joylashgan matnli paragraf deb tushunishingiz mumkin.

27. Amaliy mashg‘ulot — Qutilar ichidagi qutilar

Keling, qutilar bilan biroz ko‘proq mashq qilaylik.
Yodingizda bo‘lsa, elementlar tarkibga ega bo‘lishi mumkin, ya’ni ichida qandaydir matn bo‘lishi mumkin. Hozirgi vaqtda bizning div elementlarimizdan faqat bittasi tarkibga ega - ko‘k qutida Hooray, box! degan matn mavjud.
Ammo elementning tarkibi uchun matndan foydalanish o‘rniga biz boshqa qutidan foydalanishimiz mumkin. Buning uchun qizil rangli qutidan iborat div elementini ko'k rangli qutidan iborat div elementi ichiga joylashtiramiz (ichida hozirda mavjud bo‘lgan Hooray, box! matnni almashtirgan holda).
Mana bunga o‘xshab:

Elementlarni bir birini ichiga joylashtirganimiz tushunarliroq bo‘lishi uchun, bir birini ichida joylashgan elementlarni satr boshiga to‘g‘rilab chiqanimizga e‘tibor bering.

Ish maydonida, bunga o‘zingiz harakat qilib ko‘ring!

1-savol
Div elementlarni bir birini ichiga joylashtirganingizdan so‘ng, qizil quti ekranning qayerida ko‘rsatiladi?

Izoh:
float:right; xossasi qizil qutini ichidagi har qanday kontainerni uning o‘ng tomoniga joylashtirishga sabab bo‘ladi. U boshqa div elementi ichida bo‘lganligi sababli, u divning o‘ng tomoniga o‘tib qoladi.