Перечислите элементы с одинаковой высотой

Ответ 1

Ahh, yee старая проблема с колонкой высот.

Одно из решений состоит в том, чтобы перемещаться с нижним полем/дополнением.

Работает в IE7 + (может даже работать с использованием ie6, у меня его нет)

ul {
    overflow: hidden;
    border: 1px solid black;
    float: left;
}
li {
    float:left;
    width:100px;
    background: red;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
li + li {
    border-left: 1px solid black;
}

JSfiddle Demo

Ответ 2

Кажется, вы ищете табличный макет, поэтому лучше всего использовать <table> вместо плавающих элементов <li>.

Тем не менее, вы также можете указать стили таблиц для своих элементов:

ul {
    display: table-row;
}

li {
    width: 100px;
    border: 1px solid black;
    display: table-cell;
}

Это должно работать на большинстве современных браузеров. Здесь вы найдете обновленный скрипт .

Ответ 3

Вы можете использовать: display: inline-table для ваших элементов LI

li {
    width:100px;
    background: red;
    display: inline-table
}

здесь JSFiddle

Ответ 4

Это зависит от того, почему вы хотите, чтобы они были одинаковой высоты: какой общий эффект вы пытаетесь достичь?

Один вариант. Если вы просто пытаетесь сопоставить фон или что-то еще, вы можете поместить фон в <ul> вместо <li>, а <ul> будет автоматически расширяться до максимальной высоты его дочерние элементы.

Кроме того, если вы пытаетесь сделать их одинаковой высотой, чтобы вы могли выровнять нижнюю часть текста, вы можете объединить display: inline-block вместо float и horizontal-align: bottom;. Результатом этого Fiddle станет то, что по крайней мере похоже на то, что <li> имеют одинаковую высоту, но не будут работать для границ.

Ответ 5

Для этой цели я использую библиотеку jquery.matchHeight.js. Добавляя class= "frame-height" к всем элементам li, сделайте все элементы li той же самой высотой, что и самая высокая li strong > .

Ответ 6

Список задается как таблица, и он будет содержать свойства таблицы. для элемента списка, когда вы устанавливаете table-cell, они получат свойства ячейки таблицы, и по умолчанию все ячейки таблицы получат такую ​​же высоту.

<!--SCSS-->
.list {
     display: table;

    .list-item {
       display: table-cell;
    }
}



<!--html-->
<ul class="list">
    <li class="list-iteam">
        <h1>Heading</h1>
        <p>Details in text</p>
    </li>
    <li class="list-iteam">
        <h1>Heading 2</h1>
    </li>
    <li class="list-iteam">
        <h1>Heading 2</h1>
        <p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text </p>
    </li> 
</ul>

Ответ 7

Это 2018, и у нас есть дисплей: flex, с поддержкой браузера 97.66% (https://caniuse.com/#feat=flexbox)

С flexbox все, что вам нужно сделать, это:

ul {
  display: flex;
}

li{
 width:100px;
 border: 1px solid black;   
}

Здесь скрипка: http://jsfiddle.net/pQZ8f/1076/