Как сделать 3 столбца "li" с переменной высотой содержимого одинаковой высоты

HTML:

<ul>
  <li>
    <div class="one">Variable Height Title</div>
    <div class="two">Fixed height middle block</div>
    <div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
    <div class="four">Fixed height footer</div>
  </li>
  <li>
    <div class="one">Variable Height Title Might be two lines long</div>
    <div class="two">Fixed height middle block</div>
    <div class="three">Variable height middle block</div>
    <div class="four">Fixed height footer</div>
  </li>
  <li>
    <div class="one">Variable Height Title</div>
    <div class="two">Fixed height middle block</div>
    <div class="three">Variable height middle block</div>
    <div class="four">Fixed height footer</div>
  </li>  
</ul>

CSS

li {
  float:left;
  width:33%;
}

.one, .three {
  background-color:blue;
}
.two, .four {
  background-color:green;
}

Посмотрите на этот пример: http://jsfiddle.net/WffHD/

Есть ли способ с css only, чтобы сделать "один" div равным по высоте (который должен быть динамическим), а затем также сделать все три столбца равными по высоте на основе самого высокого? Другой способ поставить его: я хочу, чтобы все "одни" divs равны высоте, а затем все столбцы также должны быть равны высоте, растягивая высоту "трех" div. К сожалению, они должны оставаться в качестве вещей из-за плагина, который я использую. Я думаю, что это можно было бы довольно легко выполнить с помощью javascript, но, если возможно, я ищу решение css. (Caveat, нужно работать в IE7) Надеюсь, что это имеет смысл и спасибо!

Ответы

Ответ 1

Для IE7?

И чистый CSS?

И все строки 1 (Div "one" ) Равная высота?

И все столбцы равной высоты?

Ответ... Невозможно.

Ответ 2

С большим трудом или с JavaScript.

На самом деле это одна из тех, для которых был разработан макет Flex Box. Итак, у вас будет что-то вроде этого:

#mylist {
    display: flex;
    flex-flow: row wrap;
}
#mylist>li {
    flex: 1 1 100%;
}

И он должен дать всем элементам ту же высоту. Подробнее... полная спецификация Flex Box Layout.

Просто убедитесь, что у вас есть соответствующие префиксы для поставщиков, и вам хорошо идти.

Ответ 3

То, что вам нужно, невозможно без каких-либо изменений HTML.

Возможной альтернативой, с некоторыми изменениями HTML, является угроза для элемента как таблицы,

как строка таблицы и как ячейка таблицы. Вам нужно будет иметь все элементы в одной строке (li) и дополнительный элемент li в качестве нижнего колонтитула

Например:

<ul>
    <li>
        <div class="one">Variable Height Title</div>
        <div class="one">Variable Height Title that Might be two lines long</div>
        <div class="one">Variable Height Title</div>
    </li>
    <li>
        <div class="two">Fixed height middle block</div>
        <div class="two">Fixed height middle block</div>
        <div class="two">Fixed height middle block</div>
    </li>
    <li>
        <div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
        <div class="three">Variable height middle block</div>
        <div class="three">Variable height middle block</div>
    </li>
    <li>
        <div class="four">Fixed height footer</div>
        <div class="four">Fixed height footer</div>
        <div class="four">Fixed height footer</div>
    </li>

</ul>

Вы можете посмотреть здесь: http://jsfiddle.net/WffHD/25/

Ответ 4

После редактирования. Вместо использования высоты просто используйте вертикальное выравнивание. (работает в css-таблицах)

ul { display: table; } /* Behave as table */
ul > li { display: table-cell; vertical-align: bottom; }

http://jsfiddle.net/wC4RF/4/

Ответ 5

В этом вопросе есть два аспекта:
1- равные высоты для li

2- равные высоты для первых divs

вот первый шаг:
есть простое, но обманчивое чистое решение css, которое действительно и отлично работает в IE6 + (я тестировал его раньше), но нуждается в небольшом бремени и разметке.
первый:

ul {
   display: block;
   overflow: hidden;
}
ul li {
   float: left;
   margin-bottom: -99999px;
   padding-bottom: 99999px;
}

это так просто, мы заставляем высоту столбцов быть чрезвычайно высокими, а затем отсекаем их скрытым переполнением, а затем увеличиваем столбцы с огромным количеством нижнего отступов и снова уменьшаем высоту обертки с равным количеством отрицательного нижнего поля. Это дает нам только тот эффект, который нам нужен.
и для второй части, по-настоящему, единственный способ, которым я мог бы достичь, - это только отрезать их от структуры и поместить их в другую структуру, как указано выше, и поэтому с небольшой магией css кажется, что они оба только одна структура (предполагая, что вы не хотите использовать js для этого).
надеюсь, что это поможет.

Ответ 6

Вывести версию из Уильяма Г. Ривера ответ для последовательного просмотра всех браузеров, включая IE7, display: table; бесплатно. Это бит обманывает и не делает div равными высотами, но визуально это то же самое

HTML

<ul>
  <li class="one">
    <div class="one">Variable Height Title</div>
    <div class="one">Variable Height Title that Might be two lines longgggggg</div>
    <div class="one">Variable Height Title</div>
    <div class="clear"></div>
  </li>
  <li class="two">
    <div class="two">Fixed height middle block</div>
    <div class="two">Fixed height middle block</div>
    <div class="two">Fixed height middle block</div>
    <div class="clear"></div>
  </li>
  <li class="three">
    <div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
    <div class="three">Variable height middle block</div>
    <div class="three">Variable height middle block</div>
    <div class="clear"></div>
  </li>
  <li class="four">
    <div class="four">Fixed height footer</div>
    <div class="four">Fixed height footer</div>
    <div class="four">Fixed height footer</div>
    <div class="clear"></div>
  </li>
</ul>

CSS

div {
  float: left;
  width:33%;
}

.one, .three {
  background-color:blue;
}
.two, .four {
  background-color:green;
}

.clear {
    width: 100%;
    clear: both;
    float: none;
    height: 0;
}

http://jsfiddle.net/YWtSe/2/

Ответ 7

Для jQuery-решения (это можно было бы переписать только на javascript):

var liPerRow = 3; // The amount of li items on each row
var maxHeight = 0;

for (var i = 0; i < $("ul").children().length; i++) {
    if (i % liPerRow == 0) {
        // split the list in the li items for just this 'row'
        var items = $($("ul").children().splice(i, liPerRow));
        // get the highest Height value in this list
        maxHeight = Math.max.apply(null, items.map(function () {
            return $(this).height();
        }).get());

        items.height(maxHeight);
    }
}

Ответ 8

Чтобы сделать решение user1797792 еще одним шагом, вам нужно очистить явное объявление строковой высоты на элементах, чтобы иметь возможность повторно использовать эту функцию в гибком макете. В этом случае я изменял размеры элементов li внутри родительской ul, называемой "prods".

function resizeProds(){
    for (var i = 0; i < $("#prods").children().length; i++) {
        if (i % liPerRow == 0) {
            // split the list in the li items for just this 'row'
            var items = $($("#prods").children().splice(i, liPerRow));
            items.height('');
            // get the highest Height value in this list
            maxHeight = Math.max.apply(null, items.map(function () {
                return $(this).height();
            }).get());
            items.height(maxHeight);
        }
    }
}

Ответ 9

Посмотрите этот пост Мэтью Джеймса Тейлора. Это довольно сложно сделать с помощью CSS. Но это единственный "хороший" способ. Вы также можете использовать javascript и вычислить самый высокий столбец и применить эту высоту к двум другим.

Вам нужно несколько контейнеров:

<div id="container3">
  <div id="container2">
    <div id="container1">
      <div id="col1">Column 1</div>
      <div id="col2">Column 2</div>
      <div id="col3">Column 3</div>
    </div>
  </div>
</div>

Чем вам нужно переместить каждый столбец:

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}