Question

请查看this js fiddle，说明我的问题。
将“结果”窗口向左拉伸，并查看顶部“grid3”行与底部行之间的垂直间隙。

目标是让div之间的没有垂直差距。所有DIV都应该坚持在他们上面的div的顶部。（这就是为什么首先尝试这种'网格'布局，但正如你所看到的那样，100％无法解决问题）。

条件：

每个div都有固定的宽度，但未知的任意高度。
容器DIV的宽度不必为'auto'，但它是首选。当给它一个固定的宽度时，仍然会发生。
所有DIV必须水平对齐到左侧。
如果仍然使用这种“网格方法”，每个“网格”内的div数必须是有限的。

如果使用浮动（浮动：左）替换，则同样的问题也会发生请参阅：http://jsfiddle.net/pQkcd/3/（拉伸结果窗口在左侧）。

感谢。

Answer 1

我找到了这个简洁的JQuery解决方案，它可以处理未知宽度的容器（宽度：自动）。这适用于具有'float：left'和'position：relative'的DIV。我指的是这些DIV中的每一个都是一个“小组”（每个小组也都有一个'小组'类）。

诀窍是弄清楚每行中有多少个面板（你事先不知道，因为容器的宽度最初是未知的）。您可以通过跟踪位置（）的第一个更改来计算每行的面板数量。第一行中的面板应该都从顶部开始：0。
一旦你知道每行有多少个面板 - 你可以根据每个面板正上方的位置重新调整非面排的面板，你也可以＆amp;需要将每个新行的第一个面板设置为“clear：left”。

这需要在面板已经在DOM中之后运行。您还可以将它附加到
$（window）.resize事件 - 以便在容器大小发生变化时重新调整面板。

function fixPanelsPosition() {
    var panelsPassedInRow = 0;
    var panelsPerRow = 0;
    var $panelAbove;
    var newTop;
    var ptop;
    $('.panel').each(function (i) {
        // reset css (because this will be called on window resize as well...)
        $(this).css('top','').css('clear','');
        panelsPassedInRow++;
        ptop = $(this).position().top;
        //Figure out number of panels per row:
        if (ptop == 0) { panelsPerRow++; }
        // new row
        if (panelsPassedInRow > panelsPerRow) {
            //First panel in each row should have 'clear:left':
            $(this).css('clear','left');
            panelsPassedInRow = 1;
        }
        // If not in first row - bump panel up:
        if (ptop > 0) {
            $panelAbove = $('.panel').eq(i-panelsPerRow);
            newTop = $panelAbove.position().top + $panelAbove.height();
           /*  Bump the panel up by setting its 'top' value to a negative value.
            *  If you have margin-top/margin-bottom on the panels you should add that 
            *  value to the calculation:
            */
            $(this).css('top',-($(this).position().top-newTop));
        }
    });
}

Answer 2

不是每个列都使用（浮动左侧）容器？

控制包裹的内联块或浮动div的垂直对齐方式

2 个答案: