Css текст в две колонки: Разбивка текста на колонки с помощью CSS3 – html — Как сделать список опций в две колонки на CSS?

Leave a Comment / Css / By /

cssing » Архив » Как я делаю две колонки

24 November, 2005

XHTML/CSS

Мне кажется не лишним будет поделиться несколькими, для бывалых кодеров конечно очевидными, методами. Немало об этом написано – но никогда не лишне навести порядок в голове. Разумеется все без таблиц.
Очевидно – если вы умеете делать две колонки – ничего не стоит сделать их тремя – просто разбив одну из них опять на две. И так далее…

Простые две колонки через CSS

Здесь я не буду описывать замороченные техники полурезиновых и на четверть эластичных дизайнов. Просто обычная фиксированная страница. Где размеры всех колонок указаны либо в пикселах, либо в процентах, либо в EMах. И имеем такой вот HTML:

  1. <div id=”wrap”>
  3. <div id=”main”>
  4. </div>
  6. <div id=”side”>
  7. </div>
  9. </div>

Вобщем далее HTML код меняться не будет. + для простоты буду считать что:

  1. #wrap{
  2. width:700px;
  3. }

FLOAT для двухколоночного дизайна

Проще всего сделать две колонки с помощью свойства FLOAT, вот так я их как правило и делаю: (ukr.net, pravda.com.ua, cssing)

  1. #main{
  2. float:left;
  3. width:500px;
  4. }
  5. #side{
  6. float:right;
  7. width:200px;
  8. }

Еще можно так

  1. #main{
  2. float:left;
  3. …
  4. #side{
  5. float:left;
  6. …

Вот и все. Для того что бы блок #wrap растянулся до своего содержимого(#side + #main) достаточно задать:

  1. #wrap{
  2. overflow:hidden;
  3. }

Вот пример с заданными границами для наглядности.(вариации с двумя float:left)
Еще есть такая вариация:

  1. #main{
  2. float:left;
  3. …
  4. #side{
  5. margin-left:500px;
  6. …

Но она самая негибкая и неверочная – ломается в некоторых версиях ИЕ 6 – и вообще предпочитаю так никогда не делать. Пример

Из недостатков float методов – при переполнении одного из блоков – колонка может сползать(в ИЕ конечно). Но с этим можно и нужно бороться.

абсолютное позиционирование

Как известно “absolutные” блоки позиционируются относительно ближайших родительских relative-блоков. Как по мне, position:absolute – один из самых сильных инструментов в построении страниц.
Вот такой ЦСС построит нам две колонки.

  1. #wrap{
  2. position:relative;
  3. }
  4. #main{
  5. position:absolute;
  6. left:0;
  7. width:500px;
  8. }
  9. #side{
  10. position:absolute;
  11. left:500px;
  12. width:200px;
  13. }

Вот пример с границами.
Оговорка тут лишь одна – футер мы не сможем отобразить ниже обоих блоков – прийдется его “внедрить” в одну из колонок, Эта техника применяется например на http://ru.id-as.com/, http://wired.com/. Легко заметить, что футер всегда содержится в одной из колонок. Издержки метода. Зато во всем остальном он практически идеален :).

Конец

Естественно эти штуки можно применять не только для лэйаута страницы – но и для небольших элементов на ней. В тоже время в роли #wrap может выступать любой блок – даже body.

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

В любом случае всегда рад слышать уточнения, советы, Ваши мнения и техники!

XHTML/CSS

Создание разметок с использованием CSS: текст в несколько колонок

Если вам нужно создать верстку веб-страницы с отдельно находящимися текстами, которым не нужно перетекать между колонками, то код CSS довольно прост. Используя простой дизайн как основу, оберните каждую отдельную колонку текста в блок:

 

 

<div>
        <p>Hey, did you know that the modern necktie originates in the cravats worn by Croatian mercenaries during the Thirty Years War almost four hundred years ago? From that kick-ass origin, ties have become the sartorial choice of dandies, fops, and Organization Men of all stripes. Boring!
        <p>While we don’t make ties that are capable of staunching aortal bleeding from a musket-ball wound, our extra-skinny, super-strong ties could be used as a garrotte – or a tourniquet, if you wished.
        <p>Lorem ipsum dolor sit amet…
</div>

После этого просто задайте всплытие одной колонки рядом с другой:

div#column1 {
        width: 40em;
        float: left;
}
div#column2 {
        margin-left: 42em;
}

Здесь используется тот же способ, что и для размещения одной колонки рядом с изображением с подписью. Также можно задать обеим колонкам одинаковую изменяющуюся ширину:

div#column1 {
        width: 45%;
        float: left;
}
div#column2 {
        margin-left: 50%;
}

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

Отображение в виде таблицы

Давайте подумаем, как таблица обрабатывает свое содержимое. В таблице высота строки и, таким образом, высота всех ячеек в этой строке определяется содержимым самой большой ячейки. Заголовок таблицы всегда по умолчанию располагается на самом верху таблицы по центру таблицы.

Нам не нужно использовать именно таблицу для создания сайта: это неправильно с точки зрения структуры сайта и сложно в поддержании. Таблицы нужны именно для создания таблиц с данными. Нам нужно, чтобы наши блоки вели себя, как таблицы, и отображали содержимое, как ячейки таблиц.

Этого просто добиться с помощью CSS:

div#column1, div#column2 {
        display: table-cell;
        width: 50%;
}

Оба эти блока теперь одинаковой высоты. Высота всех блоков со свойством display: table-cell (отображения в виде ячейки таблицы) определяется по самому высокому блоку. Это можно увидеть, добавив рамку или цвет фона обоим элементам блока:

div#column1, div#column2 {
        display: table-cell;
        width: 50%;
        padding: 2em;
        border-bottom: 5px solid black;
}

Автор урока Dudley Storey

Перевод  — Дежурка

Смотрите также:

Макет из двух колонок | htmlbook.ru

Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.

Ширина колонок

Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через атрибут width тега <table> и для первой ячейки установить её ширину в пикселах или процентах также с помощью атрибута width, но уже для тега <td> (пример 2.16).

Пример 2.16. Ширина колонки в пикселах

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="5">
   <tr> 
    <td valign="top">Левая колонка</td>
    <td valign="top">Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top. Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края.

Переведём все используемые атрибуты таблицы в стилевые свойства. Тогда данный код будет иметь следующий вид (пример 2.17).

Пример 2.17. Использование стилей

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки</title>
  <style type="text/css">
   .layout {
    width: 100%; /* Ширина всей таблицы в процентах */
   }
   .layout TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
   }
   TD.leftcol {
    width: 200px; /* Ширина левой колонки в пикселах */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="0">
   <tr> 
    <td>Левая колонка</td>
    <td>Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

Цвет фона колонок

Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Для этого создаём новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 2.18).

Пример 2.18. Цвет фона

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки</title>
  <style type="text/css">
   .layout {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD.leftcol {
    width: 200px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
   }
   TD.rightcol {
    background: #fc3; /* Цвет фона правой колонки */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr> 
    <td>Левая колонка</td>
    <td>Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 2.21).

Рис. 2.21. Колонки разного цвета

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

Использование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 2.19).

Пример 2.19. Использование трех ячеек

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки</title>
  <style type="text/css">
   .layout {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD.leftcol {
    width: 200px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
    border: 1px solid #000; /* Параметры рамки */
   }
   TD.rightcol {
    background: #fc3; /* Цвет фона правой колонки */
    border: 1px solid #000; /* Параметры рамки */
   }
   .spacer {
    width: 10px; /* Расстояние между колонками */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr> 
    <td>Левая колонка</td>
    <td></td>
    <td>Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

В данном примере вводится еще одна колонка с именем spacer, это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками.

На рис. 2.22 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница.

Рис. 2.22. Расстояние между колонками

Линия между колонками

Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Для создания линии необходимо установить свойство border-left для правой колонки или border-right для левой (пример 2.20).

Пример 2.20. Добавление линии

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки</title>
  <style type="text/css">
   .layout {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD.leftcol {
    width: 100px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
    border-right: 1px dashed #000; /* Параметры линии */
   }
   TD.rightcol {
    background: #fc3; /* Цвет фона правой колонки */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr> 
    <td>Левая колонка</td>
    <td>Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан ниже (рис. 2.23).

Рис. 2.23. Линия между колонок

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

css — Выронять слова в одну колонку в HTML

Stack Overflow на русском

Loading…

  2. 0
  3. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  6. Войти Регистрация

  7. текущее сообщество

CSS-гриды + CSS-колонки = ♥ — CSS-LIVE

Перевод статьи CSS Grid + CSS Multi-Columns = ♥ с сайта medium.com для CSS-live.ru, автор — Патрик Броссет

В этой короткой статье я рассматриваю связь между двумя раскладочными инструментами из CSS: CSS-гриды и CSS-колонки.

Эти два инструмента можно использовать вместе весьма интересными способами для построения отзывчивых веб-дизайнов.

Начнём с обзора, что каждый из их делает.

CSS-колонки

CSS уже давно умел размещать контент по колонкам, и у них очень хорошая поддержка во всех актуальных браузерах (правда, для них по-прежнему нужны префиксы). (прим. перев.: для актуальных версий уже и префикс не нужен)

Чаще всего CSS-колоноки нужны, чтобы разбивать длинные разделы текста на несколько колонок, чтобы строки не становились такими длинными, что их неудобно читать.

Прелесть CSS-колонок в том, что их можно определять с помощью одного лишь CSS и без дополнительной разметки. Контент перетекает из колонки в колонку, естественно и автоматически, в зависимости от доступной ширины.

Например, можно определить совсем простую многоколоночную раскладку с помощью CSS-свойства column-width: 150px; и браузер просто добавит в доступную область столько колонок, сколько их вмещается:

Длинный текст перетекает из колонки в колонку

CSS-гриды

CSS-гриды — новая потрясающая система CSS-раскладки, позволяющая разработчику очень легко размещать элементы по двумерной сетке.

Если вы хотя бы краем уха не слышали об этом за весь прошлый год, вы, должно быть, живете в глухом лесу. Огромное количество статей, документаций, видео и докладов было довольно сложно не заметить.

Зайдите на сайты Джен Симмонс, Рейчел Эндрю или песочницу Мозиллы по гридам, чтобы узнать о гридах всё.

Колонки + гриды = ♥

Давайте для начала создадим простую грид-раскладку, которая размещает друг за другом набор полей ввода с их подписями, в две колонки:


<style>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 2em;
  grid-gap: .5em;
}
</style>
<div>
  <label>label</label>
  <input type="text">
  <label>label</label>
  <input type="text">
  <label>label</label>
  <input type="text">
  ...
</div>

В CSS выше создаются две колонки одинакового размера, которые будут автоматически заполняться элементами, как показано ниже:

Простой двухколоночный грид на CSS

А вот теперь интересный момент: на самом деле можно разместить грид в колоночной раскладке! И это просто круто!

В принципе, грид поддерживает разбивку на фрагменты, а значит он тоже будет перетекать по колонкам. Он будет разбит на фрагменты, где нужно, по фрагменту на колонку. Эти фрагменты — всего лишь части одного и того же грида.

Итак, давайте возьмём простой пример формы на основе грида, и посмотрим что будет, если положить её внутрь многоколоночной раскладки с column-width: 150px:

CSS-грид разбился на несколько фрагментов.

Посмотрите, как по мере доступной области грид разбивается по фрагментам, чтобы занять доступные колонки.

Вот так мог бы выглядеть весь код:


<style>
.columns {
  column-width: 200px;
  max-width: 800px;
  margin: 0 auto;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 2em;
  grid-gap: .5em;
}
</style>
<div>
  <label>label</label>
  <input type="text">
  <label>label</label>
  <input type="text">
  <label>label</label>
  <input type="text">
  ...
</div>

В числе прочего, замечательно здесь то, что весь контент находится в одном гриде, даже когда грид разбивается по нескольким фрагментам. Поэтому, к примеру, размер грид-колонки будет всегда одинаковым во всех фрагментах.

Фрагментирование внутренних отступов и границ

Если по какой-то причине вам захочется добавить самому гриду границу и внутренний отступ, тогда произойдёт примерно следующее:

Обрезанные границы и отступы

И правда, элемент, к которому применен грид, разбивается на фрагменты по многоколоночному контейнеру, но верхняя сторона у него по-прежнему лишь одна, как и нижняя. Поэтому, к примеру, нижняя граница применяется только к нижней стороне грид-элемента.

Очевидно, выглядит не очень. К счастью, и это можно решить с помощью CSS — свойства box-decoration-break. Оно определяет, как фон, границы, внешние и внутренние отступы должны работать в случаях с фрагментацией (или в случаях, когда инлайн-элемент переносится на несколько строк текста).

С помощью box-decoration-break: clone; можно получить ожидаемое поведение:

Границы и отступы теперь клонированы во всех фрагментах

Вот и всё! Можете поиграть со сложными примерами здесь на codepen, он также включает несколько забавных маленьких CSS-счётчиков, благодаря которым я пронумеровал подписи одним лишь CSS.

Счастливого коддинга, и до встречи!

P.S. Это тоже может быть интересно:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *