Вертикальное выравнивание плавающих DIV с различной высотой? - PullRequest
Новая
       21

Вертикальное выравнивание плавающих DIV с различной высотой?

2 голосов
/ 02 августа 2011

См. Мой JSfiddle , чтобы увидеть, что происходит в настоящее время

У меня есть несколько div с содержимым различной высоты. Ширина всегда одинакова.

Каждая строка должна содержать два столбца, но я бы хотел, чтобы начало каждого элемента в строке было на одной высоте. Сравните это с плагином jQuery Masonry, где все «кирпичи» сжаты вместе, чтобы убрать пробелы.

Какой хороший кросс-браузерный способ добиться этого? Моя идея состояла в том, чтобы очистить float для каждого 2-го ребенка, но я считаю, что IE не поддерживает это?

Полагаю, я мог бы что-то сделать и с jQuery, но аккуратно ли? Узнаю ли я что-нибудь, чтобы исправить это в следующий раз, когда возникнет проблема?

HTML: 

<div id="a" class="box">        Some content<br />Div A</div>
<div id="b" class="box">        Some content<br />Div B</div>
<div id="c" class="box">        Some content<br />Div C</div>
<div id="d" class="box">        Some content<br />Div D</div>
<div id="e" class="box">        Some content<br />Div E</div>
<div id="f" class="box">        Some content<br />Div F</div>

CSS: 

.wrapper { width: 444px; }
.box {
    width: 200px;
    border: 1px solid #333;
    float: left;
    margin: 0 10px;
    }
#a { height: 200px; }
#b { height: 180px; }
#c { height: 100px; }
#d { height: 80px; }
#e { height: 50px; }
#f { height: 50px; }

Ответы [ 5 ]

3 голосов
/ 02 августа 2011

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

http://jsfiddle.net/Awg3u/1/

1 голос
/ 02 августа 2011

Это то, что вы имели в виду? Он использует jQuery и добавляет немного дополнительной разметки - не уверен, что это приемлемо.

http://jsfiddle.net/Awg3u/7/

Я тестировал только в Chrome / FF и пока не проверял в IE.

0 голосов
/ 02 августа 2011

Вы можете добавить очищающий div после каждых 2 блоков следующим образом: 

<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
<div class="box"></div>
<div class="box"></div>
<div..................>

Или вы можете перенести строки в новый DIV. 

<div>
<div class="box"></div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
<div class="box"></div>
</div>
.......etc.
0 голосов
/ 02 августа 2011

Не уверен, правильно ли я понимаю, что вы хотите.

Если меня не правильно, пожалуйста.

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

(function() {
    var first = true;
    var height = 0;
    var pos;
    $('.box').each(function() {
        if (first) { // do we have the first div?
            height = $(this).height(); // set height and pos from left of first div to be used by other divs
            pos = $(this).position();
        }
        first = false;

        var current_pos = $(this).position();
        if (current_pos.left == pos.left) { // are we the first div in a row, e.g. the most left div?
            $(this).height(height); // set height to match the first div
        }
    });
})(jQuery);

http://jsfiddle.net/Awg3u/3/

0 голосов
/ 02 августа 2011

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

Там должно быть любое количество плагинов jQuery, которые могут сделать это, или вы можете свернуть свой собственный

...