html - 控制包装内联 block 或 float div 的垂直对齐

Question

请看this js fiddle ，这说明了我的问题。
向左拉伸(stretch)“结果”窗口，可以看到顶部“grid3”行和底部行之间的垂直间隙。

目标是在 div 之间永远没有垂直间隙。所有的 DIV 都应该粘在它们上面的 div 的顶部。 (这就是为什么首先尝试这种“网格”布局的原因，但是如您所见，它并没有 100% 解决问题)。

条件:

1. 每个 div 都有固定的宽度，但未知的任意高度。
2. 容器 DIV 的宽度不必为“自动”，但这是首选。不过，当给它一个固定宽度时，这种情况仍然会发生。
3. 所有 DIV 必须水平左对齐。
4. 如果仍然使用这种“网格方法”，则每个“网格”内的 div 数量必须是有限的。

如果使用 float (float:left) div 代替，也会发生同样的问题，
参见:http://jsfiddle.net/pQkcd/3/ (向左拉伸(stretch)结果窗口)。

谢谢。

Answer 1

我找到了这个简洁的 JQuery 解决方案，它可以处理未知宽度的容器 (width:auto)。这适用于具有“float:left”和“position:relative”的 DIV。我将这些 DIV 中的每一个都称为“面板”(每个也将有一个“面板”类)。

诀窍是弄清楚每行有多少个面板(您事先不知道，因为容器的宽度一开始是未知的)。您可以通过跟踪 position().top 中的第一个更改来计算每行的面板数。第一行的面板都应该从 top:0 开始。
一旦你知道每行有多少个面板 - 你可以根据每个面板正上方的位置重新调整非第一行中的面板，你也可以并且需要将每个新行的第一个面板设置为“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));
        }
    });
}