Как создать: параллельные таблицы

Как расположить столбцы параллельно

Как использовать CSS float Создание столбцовой таблицы с помощью свойств:

Пример

* {
  box-sizing: border-box;
}
/* Создание двухстолбцового макета */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (удаление плавающих элементов) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Попробуйте сами

Как использовать CSS flex Создание столбцовой таблицы с помощью свойств:

Пример

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

Попробуйте сами

Внимание:Flexbox не поддерживается в Internet Explorer 10 и более ранних версиях. Используйте ли вы float или flex зависит от вас. Но если вам нужно поддерживать IE10 и более ранние версии, следует использовать float.

Совет:Чтобы узнать больше о модуле Flexible Box布局, читайте наш Урок CSS Flexbox.

Добавление адаптивности

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

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

Пример

/* Респонсивный макет - на экранах с разрешением менее 600 пикселей, два столбца堆ливаются, а не расположены параллельно */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Попробуйте сами

Связанные страницы

Учебник:CSS таблицы

Учебник:CSS плавание

Учебник:CSS Flexbox