Как получить сетку элементов списка равной высоты? - PullRequest
Новая
       11

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

13 голосов
/ 15 февраля 2012

Я пытаюсь сделать сетку продуктов, используя элементы списка и 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>

Вот изображение дляпроиллюстрируем проблему.

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

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

Ответы [ 5 ]

12 голосов
/ 15 февраля 2012

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

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

2. Кроме того, вот некоторые другие подходы:

7 голосов
/ 24 ноября 2013

Существует вариант-кандидат W3C, называемый «flexbox», который решает эту проблему и многие другие. Чтобы получить блоки одинаковой высоты, вам просто нужно присвоить свойство display: flex для UL и display: block для LI внутри него.

Пример (CodePen)

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

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

3 голосов
/ 15 февраля 2012

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

1 голос
/ 08 июля 2014

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

Блоки равной высотыв строках

В следующем коде есть восемь пунктов списка.Если для каждой роли отображается только три или четыре элемента, то в данном примере все элементы div будут равны по высоте в строке.

<div id="blocks">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>
1 голос
/ 15 февраля 2012

Во-первых, если вы отрегулируете маржу так, чтобы она была со всех четырех сторон, она будет немного лучше при переходе на новую строку.

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

...