Содержание
Полночь, а эта div на вашем сайте по-прежнему выглядит как детский игрушечный сундук. Все элементы представляют собой беспорядочный беспорядок, и каждый раз, когда вы играете с CSS отображать собственности, они превращаются в совершенно другую чепуху.
Если вы похожи на меня, вы, вероятно, решите эту проблему, бормоча себе под нос и постоянно более агрессивно обращаясь с клавиатурой. И хотя эта стратегия срабатывала для меня раньше, недавно я решил найти лучший способ понять отображать имущество.
Получается основы отображать намного проще, чем я думал изначально. Фактически, они используют те же принципы, что и упаковка чемодана. Я собираюсь покрыть дисплей: блок, встроенный блок а также в соответствии. Если вы раньше разложили чемодан по порядку, вы увидите параллель. Если вы из тех людей, которые беспорядочно таранят всю вашу одежду - что ж, я могу для вас сделать очень много.
В нашем чемодане будет три вида одежды:
- Тонкое, как рубашка с воротником
- Футболки, которые можно закатать
- Носки или нижнее белье, которые можно заткнуть в прорези.
Для справки, если бы мы смоделировали чемодан в HTML, он бы выглядел так:
div class = 'чемодан'> div class = 'деликатный'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'футболка'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'футболка'> / div> / div>
Деликатные вещи сверху
Дисплей: блок является значением по умолчанию для большинства элементов HTML. Это означает, что элемент занимает все горизонтальное пространство в своем контейнере. div. Если он находится рядом с другими соседними элементами, он начнет новую строку и не позволит другим элементам в своей строке. Это похоже на деликатные предметы, которые вы кладете в верхнюю часть чемодана. Это деликатные или элегантные вещи, например рубашки с воротником. Вы не хотите, чтобы они сморщились, поэтому убедитесь, что они не прижимаются к другим предметам одежды.
Это поднимает одну из самых сложных частей дисплей: блок. Заметили, что рубашка с воротником не занимает всю ширину чемодана? Это не означает, что другие предметы поднимутся до его уровня. Допустим, эта рубашка составляет 60 процентов ширины чемодана. он по-прежнему блокирует присоединение других элементов к нему на верхнем уровне.
Поэтому на картинке есть оранжевая рамка. А дисплей: блок element автоматически добавит поля вокруг себя, если он не занимает все горизонтальное пространство.
Аккуратно упакованные футболки
Большая часть вашего чемодана, вероятно, заполнена остатками одежды для поездки. Для простоты мы сократим это до футболок. В Интернете идет большая дискуссия о том, что более эффективно: складывание или раскатывание. Я человек складной.
В любом случае, чтобы вместить большинство вещей, вы располагаете футболки рядом. Это именно то, что дисплей: встроенный блок предназначен для. Эти элементы могут располагаться рядом друг с другом на одной линии, а также рядом с дисплей: встроенный элементы.
в отличие дисплей: встроенный элементы, встроенный блок элемент переместится на следующую строку, если он не помещается в его содержащее div рядом с другим встроенный блок элементы. Чтобы футболка с футболки попала в следующий ряд, вам нужно разрезать ее пополам и использовать оставшуюся половину, чтобы начать новый ряд. Встроенный блок элементы не могут разделяться пополам, если они не помещаются на линии.
Носки, заполняющие пробелы
Вернитесь к исходному HTML, и вы заметите, что есть один socks div> между восемью футболками. Но посмотрите на горизонтальный вид чемодана справа. Если есть носки div>, как можно закончить средний ряд и начать нижний ряд? Это цель дисплей: встроенный!
An в соответствии элемент будет перетекать на следующую строку, если он превышает ширину div (этим он отличается от встроенный блок или же блокировать). Поскольку наши носки div заполнен носками, которые случайно заткнуты в промежутки, он может легко начать заполнять промежуток с правой стороны среднего ряда и перетекать, чтобы начать нижний ряд.
Для этого не нужно разрезать носки пополам. Вот почему они могут стать в соответствии, а футболки могут быть только встроенный блок. Если футболки в среднем ряду занимают только 60% ширины, носки div> переместится вверх, чтобы заполнить все пространство в остальной части строки.
Счастливого пути
Это последний CSS для нашего чемодана:
.delicate {дисплей: блок; ширина: 60%; } .tshirt {дисплей: встроенный блок; ширина: 20%; } .socks {display: inline; }
Вот пара альтернативных сценариев, иллюстрирующих различные варианты использования дисплея. Если бы деликатесы сверху были дисплей: встроенный блок, они поместились бы рядом с футболками. Некоторые футболки переместятся на верхнюю строчку, а остальные подстроятся соответственно. Слева и справа от рубашки с воротником не будет удобных буферов.
Если бы на каждой футболке было дисплей-блок, у вас будет огромная стопка футболок друг на друге, по одной в каждой строке. Если бы носки были дисплей: встроенный блок, все они будут располагаться в нижнем ряду, а не перемещаться между двумя рядами. Некоторые футболки переносятся на другой ряд, образуя четвертую строчку. Справа от среднего ряда футболок будет щель.
Используя описанный здесь метод, мы получаем аккуратно упакованный чемодан, который максимально использует доступное пространство.
Эта статья изначально появилась в сетевой журнал выпуск 289; купи это здесь!
