Проблема выравнивания плавающего DIV

Question

У меня текучий макет с DIV различной высоты и ширины, и я бы хотел, чтобы они были выровнены по линиям, как при поиске по istockphoto, за исключением выравнивания по верху:

изображение здесь -> http://i207.photobucket.com/albums/bb121/jpbanks/Capturadepantalla2010-06-02alas1902.png

Я попытался сместить все DIV влево, но они не выровнены правильно в линии:

изображение здесь -> http://i207.photobucket.com/albums/bb121/jpbanks/Capturadepantalla2010-06-02alas1900.png

Видите, как "Prueba" не идет влево? Я думал о плагине jQuery Masonry , но то, что я хочу, очевидно, другое. Любое решение с использованием CSS или jQuery было бы хорошо. Есть идеи?

Answer 1

Я нашел даже лучшее решение только для css. Все, что вам нужно сделать, это добавить следующий CSS в DIV детей:

.box {
    display: inline-block;
    vertical-align: top;
    float: none;
}

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

Answer 2

Они имеют ключ для того, чтобы у каждого объекта был внешний div одинакового размера. Тогда внутренний div, который на самом деле содержит фотографию. Тогда все будет правильно выровнено.

Answer 3

Вы пробовали кладку? см .: http://jasondaydesign.com/masonry_demo

Answer 4

Хорошо, вот что я в итоге и сделал: при загрузке я запускаю цикл jQuery .each () для каждого плавающего элемента (каждого '.rect'). Он обнаруживает первый элемент в каждой строке (используя .position ()) и добавляет класс «clear». Затем, когда размер окна изменяется, оно удаляет все «чистые» классы и снова выполняет цикл .each ().

Вроде так;

    $('.rect').each(function() {
    var este = $(this).position();
    var sig = $(this).next().position();
    if(este.left >= sig.left) {
        $(this).next().addClass('clear');
    }
});

$(window).resize(function () {
    $('.rect').removeClass('clear');
    $('.rect').each(function() {
        var este = $(this).position();
        var sig = $(this).next().position();
        if(este.left >= sig.left) {
            $(this).next().addClass('clear');
        }
    });
});

CSS:

.rect {
    float: left;
}

.clear {
    clear: left;
}

И это работает! Есть комментарии / предложения? Я думаю об упаковке этого в крошечный плагин. :)

Answer 5

Вы можете использовать этот плагин , чтобы дать всем элементам div высоту самого высокого элемента div.Тем не менее, в IE вы должны убедиться, что для изображений установлена ​​высота.Кроме того, кажется, что это не работает для каждой строки, что было бы идеально.возможно, вы можете изменить его в соответствии со своими потребностями.

Answer 6

Prueba «застревает» на CMAS, поэтому единственный способ сделать это - выбрать стандартный размер div, который подойдет для любого из ваших изображений, div или чего-либо еще IE:

.wrap{width:200px;height:200px;float:left;}
.inner{margin:0 auto;}

HTML:

<div class="wrap"><img src="whatever" class="inner" /></div>
<div class="wrap"><img src="anotherwhatever" class="inner" /></div>