Текст в две колонки CSS
Несколько примеров, как вывести текст в две колонки одинаковой ширины и отступом между ними.
1
Метод основан на свойстве display: inline-block
, но у него несколько особенностей:
- У блочно-строчных элементов появляются отступы из-за пробелов между элементам, решается это установкой
white-space: nowrap
у родителя. - Нужно выровнять блоки по верхний границе с помощью свойства
vertical-align: top
.
<div> <div> Текст левой колонки ... </div> <div> Текст правой колонки ... </div> </div>
HTML
.textcols { white-space: nowrap; } .textcols-item { white-space: normal; display: inline-block; width: 48%; vertical-align: top; background: #fff2e1; } .textcols .textcols-item:first-child { margin-right: 4%; }
CSS
Результат:
2
Второй метод основан на табличном отображении элементов. Имеет недостаток т.к. нужен контейнер эмитирующий <tr>
(хотя работает и без него).
Вторая проблема с отступами между колонками – если применять свойство border-spacing
, то отступы появятся не только между колонками, но и снаружи, поэтому приходится добавлять border через :first-child
и :last-child
.
К достоинтству метода можно отнести то, что колонки будут одинаковой высоты.
<div> <div> <div> Текст левой колонки ... </div> <div> Текст правой колонки ... </div> </div> </div>
HTML
.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 { border-left: 30px solid #fff; }
CSS
Результат:
3
Свойство float делает элемент «плавающим», но имеет тоже недостатки – требуется сброс потока свойством overflow: hidden
у родителя или clearfix.
Для решения данной задачи у него есть два варианта, первый:
<div> <div> Текст левой колонки ... </div> <div> Текст правой колонки ... </div> </div>
HTML
.textcols { overflow: hidden; } .textcols-left { float: left; width: 48%; background: #fff2e1; } . textcols-right { margin-left: 52%; background: #fff2e1; }
CSS
Результат:
Второй вариант:
.textcols { overflow: hidden; } .textcols-left { float: left; width: 48%; background: #fff2e1; } .textcols-right { float: right; width: 48%; background: #fff2e1; }
CSS
4
Flexbox – способ выстраивания элементов по оси. Состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.
<div> <div> Текст левой колонки ... </div> <div> Текст правой колонки ... </div> </div>
HTML
.textcols { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } . textcols-item { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; height: 48%; background: #fff2e1; } .textcols-item + .textcols-item { margin-left: 4%; }
CSS
Результат:
5
Набор свойств columns позволяет вывести содержимое блока в несколько колонок, автоматически распределяя текст между ними.
column-count
– число колонок.column-gap
– расстояние между колонками.column-width
– ширина колонок.column-rule
– разделительная линия между колонками.
<div> Текст колонок ... </div>
HTML
.textcols { column-width: 48%; column-count: 2; column-gap: 4%; background: #fff2e1; }
CSS
Результат:
Страница не найдена (ошибка 404)
PHP
|
|
HTML/CSS
|
|
JS/jQuery
htaccess
Bootstrap
Программы
Разное
Справочники
|
|
Как создать макет с двумя столбцами
❮ Назад Далее ❯
Узнайте, как создать двухколоночную сетку макета с помощью CSS.
Столбец 1
Некоторый текст.
Столбец 2
немного текста.
Попробуйте сами »
Как создать макет с двумя столбцами
Шаг 1) Добавить HTML:
Пример
1.
Шаг 2) Добавьте CSS:
В этом примере мы создадим два столбца равных :
Пример с плавающей запятой
.столбец {
плыть налево;
ширина: 50 %;
}
/* Очистить поплавки после
столбцы */
.row:after {
content: «»;
дисплей: таблица;
очистить: оба;
}
Попробуйте сами »
Современный способ создания двух столбцов — использование CSS Flexbox. Однако он не поддерживается в Internet Explorer 10 и более ранних версиях.
Пример Flex
.строка {
дисплей: гибкий;
}
. column {
flex: 50%;
}
Попробуйте сами »
Вам решать, хотите ли вы использовать float или flex для создания двухколоночного макета. Однако, если вам нужна поддержка IE10 и более ранних версий, вам следует использовать float.
Подсказка: Чтобы узнать больше о модуле Flexible Box Layout, прочтите нашу Глава CSS Flexbox.
В этом примере мы создадим два неравно столбцов:
Пример
.column {
с плавающей запятой: слева;
}
.left {
ширина: 25%;
}
.right {
ширина: 75%;
}
Попробуйте сами »
В этом примере мы создадим отзывчивый макет с двумя столбцами:
столбцы располагаются друг над другом, а не рядом */
@медиа
экран и (макс. ширина: 600 пикселей) {
.column {
ширина: 100 %;
}
}
Попробуйте сами »
Совет: Перейдите к нашему руководству по макетированию веб-сайта CSS, чтобы узнать больше о макеты сайта.
Совет: Перейдите к нашему руководству по адаптивному веб-дизайну CSS, чтобы узнать больше о адаптивный веб-дизайн и сетки.
❮ Предыдущий Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTMLУчебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
2 Top 2 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
3
О W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.
css — Разделение ячейки таблицы на два столбца в HTML
спросил
Изменено
2 года назад
Просмотрено
305 тысяч раз
У меня есть следующая таблица:
<граница таблицы="1">
Заголовок
Заголовок
Заголовок
Разбить на две колонки
И я хочу разделить ячейку, содержащую » Разделить на два столбца «, на две ячейки/столбца. Как мне это сделать?
Скрипка
- HTML
- CSS
- HTML-таблица
1
Как это http://jsfiddle.net/8ha9e/1/
Добавьте colspan="2"
к 3-му , а затем получите 4 во второй строке. <граница таблицы="1">
Заголовок
Заголовок
Заголовок
Столбец 1
Столбец 2
0
Я пришел сюда из-за аналогичной проблемы, с которой столкнулся с заголовками таблиц.
Ответ @MrMisterMan, как и другие, был действительно полезным, но границы били мою игру. Итак, я провел небольшое исследование, чтобы найти использование rowspan .
Вот что я сделал, и я думаю, это может помочь другим, столкнувшимся с чем-то подобным.
<граница таблицы = "1px">
№ элемента
ОПИСАНИЕ
Количество
Цена за товар
СУММА
рупий
П.
рупий
П.
У вас есть два варианта.
- Используйте дополнительный столбец в заголовке и используйте
в заголовке, чтобы растянуть ячейку на два или более столбца. - Вставьте
с 2 столбцами внутри td
, в который вы хотите добавить дополнительные столбцы. 0
Измените , чтобы он выглядел следующим образом: split 1 split 2
это то, что вы ищете?
<граница таблицы="1">
Заголовок
Заголовок
Заголовок
Разделить это
в два столбца
Используйте этот пример, вы можете разделить с colspan
атрибут
<ГРАММА ТАБЛИЦЫ>
Элемент 1
Элемент 1
Элемент 2
Элемент 3
Элемент 3
Элемент 4
Элемент 5
Дополнительные примеры на http://hypermedia. univ-paris8.fr/jean/internet/ex_table.html.
1
Пожалуйста, попробуйте следующий способ.
<таблица>
Месяц
Экономия
Январь
100 долларов
Февраль
$80
Сумма: $180
Пожалуйста, попробуйте этот способ.
<граница таблицы="1">
Заголовок
Заголовок
Заголовок
Разделить
в два столбца
https://jsfiddle.net/SyedFayaz/ud0mpgoh/7/
<таблица> <столбец /> <столбец /> <столбец /> <столбец /> С.
W3Schools использует W3.CSS.
colspan="2"
к 3-му , а затем получите 4 во второй строке. <граница таблицы="1">
Заголовок
Заголовок
Заголовок
Столбец 1
Столбец 2
0
Я пришел сюда из-за аналогичной проблемы, с которой столкнулся с заголовками таблиц.
Ответ @MrMisterMan, как и другие, был действительно полезным, но границы били мою игру. Итак, я провел небольшое исследование, чтобы найти использование rowspan .
Вот что я сделал, и я думаю, это может помочь другим, столкнувшимся с чем-то подобным.
<граница таблицы = "1px">
№ элемента
ОПИСАНИЕ
Количество
Цена за товар
СУММА
рупий
П.
рупий
П.
У вас есть два варианта.
- Используйте дополнительный столбец в заголовке и используйте
в заголовке, чтобы растянуть ячейку на два или более столбца. - Вставьте
с 2 столбцами внутри td
, в который вы хотите добавить дополнительные столбцы. 0
Измените , чтобы он выглядел следующим образом: split 1 split 2
это то, что вы ищете?
<граница таблицы="1">
Заголовок
Заголовок
Заголовок
Разделить это
в два столбца
Используйте этот пример, вы можете разделить с colspan
атрибут
<ГРАММА ТАБЛИЦЫ>
Элемент 1
Элемент 1
Элемент 2
Элемент 3
Элемент 3
Элемент 4
Элемент 5
Дополнительные примеры на http://hypermedia. univ-paris8.fr/jean/internet/ex_table.html.
1
Пожалуйста, попробуйте следующий способ.
<таблица>
Месяц
Экономия
Январь
100 долларов
Февраль
$80
Сумма: $180
Пожалуйста, попробуйте этот способ.
<граница таблицы="1">
Заголовок
Заголовок
Заголовок
Разделить
в два столбца
https://jsfiddle.net/SyedFayaz/ud0mpgoh/7/
<таблица> <столбец /> <столбец /> <столбец /> <столбец /> С.