Столбцы одинаковой высоты с CSS

Question

Я хотел бы использовать процент для моей таблицы CSS. К сожалению, это не работает для меня.

Что не так с этим кодом? Должен ли я использовать flexbox вместо стола?

Я хотел бы использовать таблицу, потому что я хотел бы столбцы одинаковой высоты.

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Answer 1

Вот пример использования ul / li элементы, 2 столбца с использованием процентов и имеют одинаковую высоту.

Поскольку таблицы предпочитают макет таблицы / строки / ячейки, я немного реструктурировал ваш html.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.table {
  display: table;
  width: 90%;
  height: 60%;
  padding-top: 5%;
  margin: 0 auto;
}
ul {
  display: table-row;
  list-style: none;
  margin: 0;
}

li {
  display: table-cell;
  width: 50%;
  border: 1px solid #999;
}

<div class="table">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <ul>
    <li>3</li>
    <li>4</li>
  </ul>
  <ul>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

Answer 2

Столбцы одинаковой высоты с Flexbox

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

CSS

ul { display: flex; }

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

DEMO

---

Заметки:

• Начальная настройка гибкого контейнера flex-direction: row, что означает, что дочерние элементы (aka, flex items) будут располагаться горизонтально.

• Еще одна начальная настройка гибкого контейнера align-items: stretch, что заставляет гибкие элементы увеличиваться на полную высоту (или ширину, в зависимости от flex-direction) контейнера.

• Вместе обе настройки выше создают столбцы одинаковой высоты.

• Гибкие столбцы одинаковой высоты применимы только к братьям и сестрам.

• Применение высоты к гибкому элементу отменяет функцию равной высоты.

• Столбцы одинаковой высоты применяются только для изгибаемых элементов на одной линии.

• Как отключить колонки одинаковой высоты в Flexbox?

---

Поддержка браузеров : Flexbox поддерживается всеми основными браузерами, кроме IE <10. Для некоторых последних версий браузеров, таких как Safari 8 и IE10, требуются префиксы поставщиков. Для быстрого добавления префиксов используйте Autoprefixer. Подробнее в этом ответе.

Answer 3

Я подбрасываю ответ на интерпретацию вопроса, которая отличается от @Michael_B. С начальным стилем width: 50%; на li элементы, я думаю, что желаемый результат состоит в том, чтобы шесть элементов списка попали в 2 столбца и 3 строки. Подобный случай не может быть легко решен с помощью таблиц CSS, но он относительно прост с flexbox.

ul {
  list-style: none;
  margin: 0;
  width: 100%;
  /*kills the irritating intial padding on uls in webkit*/
  -webkit-padding-start: 0;
  display: flex;
  flex-flow: row wrap;
  /*stretch is the default value, but it will force items to stretch to match others in their row*/
  align-items: stretch;
  /*below properties just emphasize the layout*/
  padding: 2px;
  background-color: green;
}
li {
  /*forces border-width and padding to be part of the declared with (50% in this case)*/
  box-sizing: border-box;
  width: 50%;
  /*list-item, inline-block, and block work equally well*/
  display: list-item;
  /*below properties just emphasize the layout*/
  border: white 2px solid;
  background-color: lightgreen;
}
/*I set this property to show what happens if 1 item has a different height*/

li:nth-child(3) {
  height: 40px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>