Многоколоночный макет — это один из новых макетов в CSS3, хотя он очень сдержанный.
Четкая структура
Структура многоколоночного макета очень проста, в основном состоит из многоколоночного контейнера и блока столбцов.
Если элемент устанавливает атрибуты ширины столбца и количества столбцов, а значение не является автоматическим, то этот элемент является контейнером с несколькими столбцами.
контейнер с несколькими столбцами отображает содержимое через несколько полей столбцов.
2. Поймите основы использования
1. количество столбцов и ширина столбца
С помощью этих двух свойств мы можем контролировать количество столбцов, но по сравнению со свойством count свойство width очень гибкое.
Когда установлен атрибут ширины, это не означает, что ширина столбца является этим фиксированным значением, она также будет гибко увеличиваться или уменьшаться в сочетании с шириной контейнера макета столбца.
2. правило столбца и разрыв столбца
Эти два свойства в основном помогают нам установить зазор между столбцами и стиль столбцов, которые относительно легко понять:
Здесь вы можете увеличить ширину правила столбца, и вы найдете удивительные открытия.
3, пролет колонны
Этот атрибут аналогичен атрибуту span в таблице, но имеет только два значения none и all, а содержимое до и после него должно быть переставлено в соответствии с правилами расположения столбцов.
3. Говоря о приложении
Теперь, когда вы освоили базовую структуру и использование, пришло время красиво оформить статью:
выглядит очень хорошо, но выглядит немного странно.
Где монстр? Потому что вы редко увидите этот тип макета на сайте, где отображаются статьи. (Проверил большинство журналов или новостных сайтов, чтобы убедиться в этом).
На самом деле, когда я увидел этот макет с несколькими столбцами, первое, о чем я подумал, это верстка древних книг, затем мы можем использовать этот макет столбцов для верстки древних книг:
.demo {
width: 300px;
margin: 100px auto;
columns: 10;
column-rule: 1px dashed rgb(213,213,213);
direction: rtl;
word-wrap: break-word;
text-align: center;
}
При использовании многоколоночного макета для достижения этого эффекта необходимо обратить внимание:
- Ширина каждого столбца должна контролироваться в пределах одного слова, поэтому к ширине контейнера предъявляются жесткие требования;
- Используйте атрибут word-wrap: break-word, чтобы перевести китайский знак препинания на разрыв строки;
Итак, возможно ли добиться вышеуказанного набора текста без многоколоночного макета? конечно может! И мы должны встретить нового члена CSS3 -- write-mode:
.demo {
width: 180px;
margin: 50px auto;
height: 170px;
line-height: 30px;
font-size: 16px;
letter-spacing: 1px;
writing-mode:vertical-rl;
background: repeating-linear-gradient(to left, #000, #000 3%, #FFF 3%, #FFF);
background-size: 30px 100%;
}
Единственное, за что тут стоит покритиковать, так это за то, что стиль столбца нельзя менять так же гибко, как столбец-правило в верстке столбцов.
CSS всегда вызывает у людей очень волшебное чувство.Затем мы используем макет из нескольких столбцов, чтобы получить макет сетки из девяти квадратов:
Его самый большой недостаток наглядно показали цифры на рисунке.На самом деле при реализации такой компоновки особое внимание следует уделить влиянию вертикального отступа дочерних элементов.Это оставляем читателю на практику.
4. Резюме
Как новый метод компоновки в CSS3, он не так привлекателен, как flex, в основном потому, что болевые точки, которые он решает, относительно предвзяты, но из реализованного выше макета сетки из девяти квадратов нетрудно увидеть, что он все еще может сделай что-нибудь.