CSS: четыре способа сделать макет из двух колонок одинаковой ширины

Если в макете нужны просто две колонки без таблиц и тегов col, самый простой вариант - поставить свойство float: left; одному из разделов.

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

<style>
 #wrap {
  width: 90%;
  margin: 0 auto;
 }
 #left_col {
  float: left;
  width: 50%;
 }
 #right_col {
  float: right;
  width: 50%;
 }
</style>

<div id="wrap">
 <div id="left_col">
  Содержимое левой колонки
 </div>
 <div id="right_col">
  Содержимое правой колонки
 </div>
</div>

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

Другой вариант - использовать "табличные" возможности свойства display:

<style>
 #wrap{
  display: table;
  width: 90%;
  margin: 0 auto;
 }
 #content{
  display: table-row;
 }
 #content > div {
  display: table-cell;
 }
 #left_col {
  width: 50%;
 }
 #right_col {
  width: 50%;
 }
</style>

<div id="wrap">
 <div id="content">
  <div id="left_col">
   Содержимое левой колонки
  </div>
  <div id="right_col">
   Содержимое правой колонки
  </div>
 </div>
</div>

Ещё проще в применении будет новое свойство column-count:

<style>
 .columns {
  width: 90%;
  margin: 0 auto;
  column-count: 2;
  column-width: 50%;
  column-rule: 1px dotted #ccc;
  column-fill: balance;
  column-gap: normal;
 }
</style>
<div class="columns">
 Содержимое, которое будет выведено в 2 колонки
</div>

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

Наконец, у display теперь есть значение flex, позволяющее управлять, в том числе, и размещением контента в колонки:

<style>
.wrap {
 display: flex;
 width: 90%;
 margin: 0 auto;
}
.child {
 display: flex;
 width: 100%;
}
</style>

<div class="wrap">
 <div class="child">
  Содержимое левой колонки
 </div>
 <div class="child">
  Содержимое правой колонки
 </div>
</div>

Это не будет подерживаться в Internet Explorer 8-9 версий и других устаревших браузерах.

Можно придумать миллион вариантов конкретного "колоночного" стиля, но, наверное, все они так или иначе сведутся к этим четырём базовым подходам.

Проверить примеры можно, наполнив текстовые разделы содержимым и выполнив файлы .html с разметкой на своём компьютере.

18.06.2021, 14:21 [2176 просмотров]