Css текст в две колонки: Текст в две колонки HTML: как это сделать и какие теги использовать?

Leave a Comment / Css / By /

Текст в две колонки HTML: как это сделать и какие теги использовать?

Текст в две колонки в HTML можно сделать несколькими путями. И, естественно,при помощи таблицы стилей CSS.

Макет сайта в 2 колонки — это довольно распространенное явление. Использовать такой макет можно по-разному. Но обычно в одной колонке размещают какой-нибудь контент, а в другой — меню навигации, виджеты, разделы сайта и т. д. Иногда такой макет применяют для отдельных страниц, чтобы разместить на них свои статьи в 2 столбца.

 

Текст в две колонки в HTML

Мы приведем несколько примеров того, как сделать текст в две колонки в HTML при помощи CSS.

 

Свойство display: inline-block;

Допустим, у нас есть такой HTML:

<body>

<div>

<div>

Левая колонка с текстом

. ..

</div>

<div>

Правая колонка с текстом

…

</div>

</div>

</body>

Код CSS будет:

.text2cols {

white-space: nowrap;

}

.text2cols-item {

white-space: normal;

display: inline-block;

width: 48%;

vertical-align: top;

background: #fff2e1;

}

.text2cols .text2cols-item:first-child {

margin-right: 4%;

}

 

2 колонки HTML при помощи табличного представления

Допустим, у нас есть такой HTML:

<body>

<div>

<div>

<div>

Левая колонка с текстом

. ..

</div>

<div>

Правая колонка с текстом

…

</div>

</div>

</div>

</body>

У нас будет вот такой CSS:

.text2cols {

display: table;

width: 100%;

border-collapse: collapse;

}

.text2cols-row {

display: table-row;

}

.text2cols-item {

display: table-cell;

width: 50%;

vertical-align: top;

padding: 0;

background: #fff2e1;

}

.text2cols-row .text2cols-item:first-child {

border-right: 30px solid #fff;

}

. text2cols-row .text2cols-item:last-child {

border-left: 30px solid #fff;

}

 

Используем свойство «float»

Допустим, у нас есть код HTML:

<body>

<div>

<div>

Левая колонка с текстом

…

</div>

<div>

Правая колонка с текстом

…

</div>

</div>

</body>

У нас будет вот такой CSS:

.text2cols {

overflow: hidden;

}

.text2cols-left {

float: left;

width: 48%;

background: #fff2e1;

}

.text2cols-right {

margin-left: 52%;

background: #fff2e1;

}

 

Используем свойство «flexbox»

Допустим, у нас есть такой HTML:

<body>

<div>

<div>

Левая колонка с текстом

. ..

</div>

<div>

Правая колонка с текстом

…

</div>

</div>

</body>

У нас будет такой CSS:

.text2cols {

display: flex;

flex-direction: row;

flex-wrap: wrap;

width: 100%;

}

.text2cols-item {

display: flex;

flex-direction: column;

flex-basis: 100%;

flex: 1;

height: 48%;

background: #fff2e1;

}

.text2cols-item + .textcols-item {

margin-left: 4%;

}

  1. Используя набор свойств «columns»

Допустим, у нас есть такой HTML:

<body>

<div>

Колонки с текстом

.

..

</div>

</body>

У нас будет такой CSS:

.text2cols {

column-width: 48%;  /ширина колонок

column-count: 2;  /количество колонок

column-gap: 4%;  /расстояние между колонками

background: #fff2e1; 

} 

Многоколоночность на CSS подробнее / Хабр

grokru

Время прочтения 2 мин

Просмотры

79K

Разработка веб-сайтов *CSS *

Туториал

Перевод

Автор оригинала: Thoriq Firdaus

В продолжение своего топика Новое в CSS3: многоколоночность, flexbox, сеточная разметка предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.

Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div’ов. Но все может стать намного проще с CSS3 Multi Column Module.

Официальная спецификация, Поддержка браузерами.

Создание контента, разбитого на несколько колонок

Используем HTML5-тег article:

<article>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,  
    rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.  
    Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit  
    amet tincidunt orci placerat in. Integer vitae consequat augue.  
  
    //и т.д.
</article>

Разбиваем текст на две колонки:

article {  
    -webkit-column-count:2;  
    -moz-column-count:2;  
    column-count:2;  
}

При помощи свойства column-width можно задать колонкам необходимую ширину:

article {  
    -moz-column-width: 150px;  
    -webkit-column-width: 150px;   
    column-width: 150px;  
}

Интервал между колонками

Интервал задается свойством column-gap в px или em, и не может быть отрицательным:

article {     
    -webkit-column-gap: 30px;  
    -moz-column-gap: 30px;  
    column-gap: 30px;  
}

Разделитель колонок

Свойство column-rule позволяет добавлять разделитель между колонками, принцип работы схож с border.

article {  
    -moz-column-rule: 1px dotted #ccc;  
    -webkit-column-rule: 1px dotted #ccc;  
    column-rule: 1px dotted #ccc;  
}

Объединение колонок

Свойство column-span работает аналогично с colspan в table, объединяя нужные колонки.

article h2 {  
    -webkit-column-span: all;  
    column-span:all;  
}

Демо всех примеров

+ исходники.

Итог

Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Список поддерживаемых браузеров уже достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную javascript-библиотеку.

Теги:

  • multi-column
  • css

Хабы:

  • Разработка веб-сайтов
  • CSS

Всего голосов 71: ↑65 и ↓6 +59

Комментарии 46

Кирилл @grokru

co-founder at Beau

Telegram

Комментарии Комментарии 46

javascript — автоматическое размещение 2 столбцов текста с помощью CSS

Автоматическое размещение двух столбцов рядом друг с другом в настоящее время невозможно только с помощью CSS/HTML. Два способа добиться этого:

Способ 1: Когда нет непрерывного текста, только много несвязанных абзацев:

Сместить все абзацы влево, дать им половину ширины содержащего элемента и, если возможно, установить фиксированную высоту .

 <дел>
  
Это пункт 1. Lorem ipsum... 

  
Это параграф 2. Lorem ipsum... 

  
Это пункт 3. Lorem ipsum... 

  
Это параграф 4. Lorem ipsum... 

  
Это пункт 5. Lorem ipsum... 

  
Это пункт 6. Lorem ipsum...
#контейнер { ширина: 600 пикселей; } #контейнер p { поплавок: слева; ширина: 300 пикселей; /* возможно также height: 300px; */ }

Вы также можете вставлять более четкие разделители между абзацами, чтобы не использовать фиксированную высоту. Если вы хотите два столбца , добавьте более четкий раздел между двумя и двумя абзацами. Это выровняет верхнюю часть двух следующих абзацев, что сделает его более аккуратным. Пример:

 <дел>
  
Это пункт 1. Lorem ipsum... 

  
Это параграф 2.  Lorem ipsum... 

  <дел>
  
Это пункт 3. Lorem ipsum... 

  
Это параграф 4. Lorem ipsum... 

  <дел>
  
Это пункт 5. Lorem ipsum... 

  
Это пункт 6. Lorem ipsum...
/* в дополнение к приведенному выше CSS */ .clear { ясно: оба; высота: 0; }

Способ 2: Когда текст непрерывный

Более сложный, но выполнимый.

 <дел>
  <дел>
    
Это пункт 1. Lorem ipsum... 

    
Это параграф 2. Lorem ipsum... 

    
Это пункт 3. Lorem ipsum...
<дел>

Это параграф 4. Lorem ipsum...

Это пункт 5. Lorem ipsum...

Это пункт 6. Lorem ipsum...