Текст в две колонки
Метод основан на свойстве display: inline-block , но у него несколько особенностей:
- У блочно-строчных элементов появляются отступы из-за пробелов между элементам, решается это установкой white-space: nowrap у родителя.
- Нужно выровнять блоки по верхний границе с помощью свойства vertical-align: top .
.textcols < white-space: nowrap; >.textcols-item < white-space: normal; display: inline-block; width: 48%; vertical-align: top; background: #fff2e1; >.textcols .textcols-item:first-child
Результат:
Display table
Вторая проблема с отступами между колонками – если применять свойство border-spacing , то отступы появятся не только между колонками, но и снаружи, поэтому приходится добавлять border через :first-child и :last-child .
К достоинтству метода можно отнести то, что колонки будут одинаковой высоты.
.textcols < display: table; width: 100%; border-collapse: collapse; >.textcols-row < display: table-row; >.textcols-item < display: table-cell; width: 50%; vertical-align: top; padding: 0; background: #fff2e1; >.textcols-row .textcols-item:first-child < border-right: 30px solid #fff; >.textcols-row .textcols-item:last-child
Как расположить блоки в 2 колонки?
Нужно расположить блоки разной высоты в 2 колонки:
Последовательность должна формироваться автоматически с лево на право, что бы при динамическом добавлении новых блоков, они становились сразу в эти 2 колонки. А при адаптации в 1 колонку, последовательность блоков была нормальной.
Т.е. css свойства column и flex не решают данной проблемы.
- Вопрос задан более трёх лет назад
- 2745 просмотров
1 комментарий
Простой 1 комментарий
dariakuznetsova / 123.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| /*——Колонки——-*/ |
| < / div > |
| < / div > |
| < / div > |
| . wrapper |
| @extend %clearfix; |
| > |
| /*1)*/ |
| . left |
| float : left; |
| overflow : hidden; |
| > |
| . right |
| float : left; |
| max-width : 300 px ; /*чтобы при увеличении контента блок не слетел вниз*/ |
| margin-left : 200 px ; /*ширина первого блока + нужный между ними отступ*/ |
| > |
| /*2) Только если всего 2 колонки*/ |
| . left |
| float : left; |
| > |
| . right |
| float : right; |
| > |
| /*3)*/ |
| . left |
| float : left; |
| > |
| . right |
| overflow : hidden; |
| > |
| /*——Способы центрирования——*/ |
| < / div > |
| /* 1) Самый простой. Сделать обертку ячейкой. Недостаток — заданы жесткие размеры, |
| если увеличить обертку, центрование собьется*/ |
| div |
| display : table-cell ; |
| width : 200px; |
| height : 200px; |
| text-align : center ; |
| vertical-align : middle ; |
| img |
| display : inline-block; |
| > |
| > |
| /* 2) У обертки должны стоять жесткие размеры, но их можно менять, |
| и ничего не ломается. Для резиновых сайтов картинке можно поставить, например, |
| width: 60%, тогда она будет увеличиваться вместе с оберткой. Но не забыть ограничить ей |
| высоту в таком случае */ |
| div |
| position : relative ; |
| width : 200px; |
| height : 200px; |
| img |
| position : absolute; |
| top : 0 ; |
| right : 0 ; |
| bottom : 0 ; |
| left : 0 ; |
| margin : auto; |
| display : block; |
| > |
| > |
| /*3) Например, картинка 150px*150px. Центр не сбивается при увеличении обертки, но если |
| изменится размер самой картинки, то придется перебивать значения margin-top и margin-left*/ |
| div |
| position : relative ; |
| img |
| position : absolute; |
| display : block; |
| top : 50 % ; |
| left : 50 % ; |
| margin-top : -75 px ; |
| margin-left : -75 px ; |
| > |
| > |
| /*4) Работает только от IE10*/ |
| div |
| position : relative ; |
| img |
| position : absolute; |
| top : 50 % ; |
| left : 50 % ; |
| transform : translateX ( -50 % ) translateY ( -50 % ); |
| > |
| > |
| /*5) Позиционируем форму авторизации, которая при неправильно введенных данных |
| может увеличиваться в высоту из-за появления текста «ошибка»*/ |
| < / f or m > |
| < / div > |
| . form-wrapper |
| position : absolute; /*т.е. у родительского блока (например, body) поставить position: relative*/ |
| top : 0 ; |
| right : 0 ; |
| bottom : 0 ; |
| left : 0 ; |
| text-align : center; /*позиционирование по горизонтали*/ |
| vertical-align : middle; |
| width : 300 px ; /*Обязательно задать нужную ширину, чтобы при уменьшении окна блок не соскакивал вниз*/ |
| > |
| form |
| display : inline-block; |
| & : before |
| content : «» ; |
| display : inline-block; |
| height : 100 % ; |
| width : 0 ; |
| vertical-align : middle; |
| > |
| > |
| /*6) Центрование, например, надписи в кнопке |
| Подходит только, если текст однострочный и не скинется на вторую*/ |
| button |
| display : block; |
| width : 100 px ; |
| height : 50 px ; |
| text-align : center; |
| line-height : 50 px ; |
| > |
| /*——Выпадающие менюшки——*/ |
| < / a > < / li > |
| < / a > |
| < / div > |
| < / li > |
| < / a > < / li > |
| < / ul > |
| /*1) нужно растянуть пункты меню во всю длину (кол-во пунктов может меняться)*/ |
| ul |
| text-align : justify; /*работает там, где есть неск строчек, поэтому добав-м псевдоэлемент*/ |
| & : after |
| content : «» ; |
| display : inline-block; |
| width : 100 % ; |
| height : 0 ; |
| > |
| > |
| li |
| display : inline-block; |
| > |
| /*2) Есть выпадающий список. Позиционируем абсолютом, относительно родительского li. |
| Во-2, его прячем. display:none использовать для самых простых менюшек, |
| для остального:*/ |
| . pop-up |
| position : absolute; |
| top : 30 px ; |
| left : -9999 px ; /*не забыть для обертки поставить overflow: hidden*/ |
| opacity : 0 ; |
| transition : ; /*чтобы была плавность появления*/ |
| > |
| /*3) при наведении на обертку li ставим ховер*/ |
| li |
| position : relative; |
| & : hover |
| . pop-up |
| left : -45 px ; |
| opacity : 1 ; |
| > |
| > |
| > |
Где и как использовать мультиколонки (CSS Columns)
При всём ажиотаже вокруг технологий CSS Grid и Flexbox, часто упускается из виду другой метод разметки. В этой статья я хочу рассмотреть многоколоночный макет — часто называемый просто «Multicol» или «CSS Columns». Вы узнаете, для каких задач он подходит и какие нюансы следует учитывать при его использовании.
Что такое мультиколонки?
Основная идея мультиколонок заключается в том, что вы можете взять фрагмент содержимого и поместить его в несколько колонок, как в газете. Вы делаете это с помощью одного или двух свойств. Свойство column-count задаёт количество колонок, на которое вам бы хотелось разбить содержимое. Свойство column-width задаёт идеальную ширину, давая возможность браузеру самому определить, сколько колонок при этом поместится.
Неважно, какие элементы находятся внутри блока, который вы превращаете в многоколоночный контейнер, все элементы остаются в обычном потоке, но разбиваются на колонки. Это делает CSS Columns непохожим на другие методы вёрстки, которые у нас есть в браузерах сегодня. Flexbox и Grid, например, берут дочерние элементы контейнера, а затем эти элементы участвуют в flex или grid макете. В случае с CSS Columns, у вас всё ещё имеется обычный поток, только не внутри самой колонки.
В примере ниже я использую column-width , чтобы сделать колонки шириной как минимум 14em. CSS Columns определяет, сколько колонок шириной 14em поместятся в контейнере, а затем распределяет между ними оставшееся пространство. Колонки будут иметь ширину не меньше 14em, кроме ситуации, когда помещается только одна колонка, в этом случае она может становиться уже. CSS Columns стал первым случаем, в котором мы столкнулись с подобным поведением в CSS, создавая колонки, которые по умолчанию были отзывчивыми. Нет необходимости добавлять медиа-выражения и изменять количество колонок на разных контрольных точках, вместо этого мы указываем оптимальную ширину и браузер будет работать с ней.
Заранее известное небольшое количество содержимого
Бывают ситуации, когда при разработке сайта нам заранее известно, что количество определенного содержимого будет небольшим и поместится на большинстве экранов, не вызывая нежелательной прокрутки. Я использовала колонки на страницах презентации на Notist для введения.
Andy Clarke разработал прекрасный пример для сайта Equfund
Чтобы избежать ситуаций возникновения прокрутки на очень маленьких экранах, помните, что можете использовать медиа-выражения для проверки высоты области просмотра так же, как и ширины. Если включите колонки только на тех контрольных точках, которые имеют минимальную высоту min-height больше достаточной для содержимого, это может спасти пользователей очень маленьких устройств.
Masonry-подобное отображение контента
Другой пример, когда колоночный макет отлично работает — в ситуациях, когда вы хотите отобразить содержимое в стиле Masonry. Колонки в данный момент — это единственный метод разметки, который создаст этот тип разметки с элементами разной высоты. CSS Grid не оставит отступ или растянет элемент, чтобы строго соответствовать двухмерной сетке.
У Veerle Pieters есть отличный пример использования колонок для этих целей на её вдохновляющей странице.
Grid и Flexbox фолбеки
Свойства column- также могут быть использованы как фолбек для Grid или Flex макета. Если вы укажете одно из колоночных свойств для контейнера, а затем превратите этот контейнер во Flex или Grid макет с помощью display: flex или display: grid любое поведение колонок будет отменено. Если у вас есть, например, карточный макет, который использует CSS Grid, и при этом будет удобочитаемым в нескольких колонках, можно использовать колонки как простой запасной вариант. Браузеры, которые не поддерживают CSS Grid, получат колоночное отображение, те которые поддерживают, получат Grid-сетку.
Не забывайте про CSS Columns!
Довольно часто, отвечая на вопросы о выборе между Grid или Flexbox, вместо них я рекомендую CSS Columns. Возможно, вы не будете использовать их на каждом сайте, но когда столкнетесь с подходящей задачей, они могут стать действительно полезными. На MDN присутствуют полезные ресурсы по CSS Columns и связанным с ними fragmentation properties.
Если вы используете колонки в своем проекте, возможно вам стоит оставить упоминание об этом в комментариях, чтобы поделиться другими способами использования этого функционала