Animal Trading cards

38. Amaliy mashg‘ulot — ma’no bilan uslub farqi

1-savol

Quyida kodning bir nechta parchalari mavjud. Ularning qaysi biri HTML va qaysi biri CSS?

39. Amaliy mashg‘ulot — Konteynerlar (1/2)

1-savol

.box klassiga float:right xossasini qo‘shganingiza, nima sodir bo‘ladi?



Izoh:

Har bir quti alohida alohida suriladi, bu ularni gorizontal qatorga tushishiga olib keladi (bu biz istagan natija emas).

Keyingi sahifada, uchta qutini div konteyneriga joylashtirganimizda qanday o‘zgarishlar bo‘lishini kuzatamiz.

40. Amaliy mashg‘ulot — Konteynerlar (2/2)

Qutilarni o‘ng tomonga siljitishga urinish biz xohlagan natijani bermadi - ular vertikal qatorda joylashishni o‘rniga, gorizontal qatorga tushib qolishdi.

Bu muammoni hal qilish uchun uchta qutini to‘rtinchi qutini ichiga joylashtiramiz. Ularni shu kabi konteynerga o‘rab, ichidagi qutilarning tartibini o‘zgartirmasdan konteynerni boshqa joyga ko‘chirishimiz mumkin.

Odatdagidek, agar siz bir joyda qo‘tib qolsangiz, ish maydonidan pastda biz yozgan kodni topishingiz mumkin.