Зміст
- Делікатні предмети зверху
- Акуратно упаковані футболки
- Шкарпетки, які заповнюють прогалини
- Щасливої дороги
Зараз північ, і та сама див на вашому сайті все ще виглядає як дитяча іграшкова скриня. Всі елементи - безлад, і кожен раз, коли ви граєте з CSS дисплей власності, вони переставляють себе на зовсім іншу нісенітницю.
Якщо ви схожі на мене, ви, мабуть, вирішите це, бурмочучи собі під нос і стаючи незмінно агресивнішими за допомогою клавіатури. І хоча ця стратегія працювала для мене раніше, нещодавно я вирішив знайти кращий спосіб зрозуміти це дисплей майно.
Виявляється ази дисплей набагато простіші, ніж я спочатку думав. Насправді вони використовують ті самі принципи, що й упаковка валізи. Я збираюся покрити дисплей: блок, вбудований блок і в лінію. Якщо ви раніше впорядковували валізу, ви побачите паралель. Якщо ви така людина, яка безсистемно утрамбовує весь ваш одяг - ну, я можу зробити для вас лише так багато.
У нашій валізі буде три типи одягу:
- Ніжні, як сорочка з коміром
- Футболки, які можна закатати
- Шкарпетки або нижню білизну, які можна заправити в щілини
Для довідки, якби ми змоделювали валізу в HTML, це виглядало б так:
div class = 'чемодан'> div class = 'делікатний'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Делікатні предмети зверху
Дисплей: блок є типовим для більшості елементів HTML. Це означає, що елемент займає весь горизонтальний простір у своєму контейнері див. Якщо він знаходиться поруч з іншими елементами брата або сестри, він почне новий рядок і не дозволить інші елементи на своєму рядку. Це схоже на делікатні предмети, які ви кладете у верх вашої валізи. Це делікатні або розумні вироби, такі як сорочки з коміром. Ви не хочете, щоб вони зморщувались, тому переконайтеся, що вони не притискаються до інших предметів одягу.
Це піднімає одну з найскладніших частин дисплей: блок. Зверніть увагу, як сорочка з коміром не займає всю ширину валізи? Це не означає, що інші предмети підскочать до свого рівня. Скажімо, ця сорочка становить 60 відсотків ширини валізи; він все одно заблокує інші елементи від приєднання до нього на найвищому рівні.
Ось чому на малюнку є помаранчева облямівка. A дисплей: блок елемент автоматично додасть поле навколо нього, якщо він не займає весь горизонтальний простір.
Акуратно упаковані футболки
Більшість вашої валізи, мабуть, повна решти одягу для вашої подорожі. Для простоти ми збираємося скоротити це лише до футболок. В Інтернеті ведеться велика дискусія щодо того, чи є складання або катання більш ефективним. Я складаюча людина.
У будь-якому випадку, щоб помістити більшість предметів, ви вишикуєте свої футболки поруч. Це саме те, що дисплей: вбудований блок призначений для. Ці елементи можуть сидіти поруч один з одним на одній лінії, а також поруч дисплей: вбудований елементів.
На відміну від дисплей: вбудований елементи, an вбудований блок елемент перейде до наступного рядка, якщо він не вміщується в його вмісті див поряд з іншим вбудований блок елементів. Для того, щоб футболка вилилася на наступний ряд, вам потрібно було б розрізати її навпіл, а іншу половину використати для початку нового ряду. Вбудований блок не дозволяється розділяти елементи навпіл, якщо вони не відповідають лінії.
Шкарпетки, які заповнюють прогалини
Поверніться до оригінального HTML-коду, і ви помітите, що є один шкарпетка div> між вісьмома футболками. Але погляньте на горизонтальний вигляд валізи праворуч. Якщо є один шкарпетки div>, як можна закінчити середній ряд і почати нижній ряд? Це мета дисплей: вбудований!
Ан в лінію елемент перекинеться на наступний рядок, якщо він перевищує ширину див (таким чином він відрізняється від вбудований блок або блок). З наших шкарпеток див повний шкарпеток, випадково запханих у щілини, він може легко почати заповнювати щілину з правого боку середнього ряду і перекинутися, щоб почати нижній ряд.
Для цього не потрібно буде розрізати навпіл шкарпетки. Ось чому вони можуть стати в лінію, тоді як футболки можуть бути тільки вбудований блок. Якщо футболки середнього ряду займали лише 60 відсотків ширини, то шкарпетки div> переміститься вгору, щоб заповнити весь простір в решті ряду.
Щасливої дороги
Це остаточний CSS для нашої валізи:
.delicate {display: block; ширина: 60%; } .tshirt {дисплей: вбудований блок; ширина: 20%; } .шкарпетки {дисплей: вбудований; }
Ось кілька альтернативних сценаріїв, щоб проілюструвати різні способи використання дисплея. Якби делікатеси зверху мали дисплей: вбудований блок, вони помістилися б прямо до футболок. Частина футболок рухалася б до верхньої лінії, а решта відповідно регулювалась. Не було б зручного буфера зліва і праворуч від сорочки з коміром.
Якби кожна футболка мала дисплей-блок, у вас буде масивний стек футболок один на одного, по одному на рядок. Якби шкарпетки мали дисплей: вбудований блок, всі вони сиділи б у нижньому ряду, а не пробігали між двома рядами. Деякі футболки будуть висунуті на інший ряд, утворюючи четвертий рядок. Праворуч від середнього ряду футболок буде розрив.
За допомогою методу, який я описав тут, ми отримуємо акуратно упаковану валізу, яка найкраще використовує наявний простір.
Ця стаття спочатку з'явилася в мережевий журнал випуск 289; придбайте його тут!
