Как получить сетку элементов с одинаковым значением высоты?

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

Код:

#blocks ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}

#blocks li {
  display:inline-block;
  vertical-align:top;
  width:280px;
  background-color:#ff9933;
  padding:13px;
  margin: 0px 0px 20px 19px;
}

<div id="blocks">
    <ul>
       <li>...</li>
       <li>...</li>
       <li>...</li>
    </ul>
</div>

Здесь изображение, чтобы проиллюстрировать проблему.

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

И наконец: Извините, английский не мой родной язык:)

Ответы

Ответ 1

1. Добавление следующего в CSS li будет имитировать пример изображения, который вы предоставили.

    height: 150px;
    min-height: 150px;
    overflow:auto;

2. Также есть несколько других подходов:

Ответ 2

Там находится макет кандидата W3C под названием "flexbox", который заботится об этой проблеме и многом другом. Чтобы достичь равных высот, вы просто назначили свойство display: flex для UL и display: block для LI внутри него.

Пример (CodePen)

Это не приведет вас к очень далеко, если вам нужно поддерживать старые браузеры:), но если вы можете обойти это, это просто и супер круто.

Ссылка: Полное руководство по Flexbox

Ответ 3

Я не думаю, что есть способ, запрещающий javascript, сделать это; моя рекомендация состояла в том, чтобы установить определенную высоту и, возможно, overflow:auto, поэтому в случае, когда содержимое переполняется, оно не искажает ваш сайт, и ваши читатели все еще могут видеть ваш контент.

Ответ 4

Во-первых, если вы отрегулируете маржу на всех 4 сторонах, она немного изменится на поток к новой строке.

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

Ответ 5

Если у вас больше div и, следовательно, больше строк, без div-div (контейнеры div, которые отмечают строку), то следующий пример из CSS Tricks делает то, что вам нужно:

Равные блоки высоты в строках

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

<div id="blocks">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>