Question

我有一个不同高度和宽度的DIV流畅布局，我希望它们可以通过线条对齐，就像你在istockphoto上搜索一样，除了与顶部对齐：

此处图片 - ＆gt; http://i207.photobucket.com/albums/bb121/jpbanks/Capturadepantalla2010-06-02alas1902.png

我尝试将所有DIV浮动到左侧，但它们未正确对齐到行中：

此处图片 - ＆gt; http://i207.photobucket.com/albums/bb121/jpbanks/Capturadepantalla2010-06-02alas1900.png

看看“Prueba”怎么没有一直向左走？我想到了the jQuery plugin Masonry，但我想要的却明显不同。使用CSS或jQuery的任何解决方案都可以。有什么想法吗？

Answer 1

它们的关键是每个对象都有一个相同大小的外部div。然后是一个实际包含照片的内部div。然后一切都会正确对齐。

Answer 2

我发现了一个更好的仅限CSS的解决方案。您所要做的就是将以下css添加到子DIV：

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

就是这样！您所要做的就是将它们显示为内联块，而不是将它们定位为浮动DIV的！我不敢相信我之前没弄明白......

Answer 3

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>

Answer 4

您可以使用this plugin为所有div提供最高div的高度。但是，在IE中，您需要确保图像具有高度设置。此外，这似乎并不适用于每行，这将是理想的。也许你可以根据自己的需要进行修改。

Answer 5

好的，这就是我最终做的事情：在加载时，我为每个浮动项目运行一个jQuery .each（）循环（每个'.rect'）。它检测每行中的第一项（使用.position（））并添加'clear'类。然后，当窗口调整大小时，它会删除所有'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 6

你试过砌砖吗？见：http://jasondaydesign.com/masonry_demo

浮动DIV的对齐问题

6 个答案: