Question

我有一个由php脚本生成的网页，该脚本读取存储在服务器上的文本文件，并以列的形式显示结果，这些列是具有以下css属性的div：

width:auto;
min-width:500px;
display:inline-block;
vertical-align:top;
height:auto;
margin:.5%

这种设计的最大优点是，如果有足够的水平空间，用户将在屏幕上看到两列，有时甚至是三列或更多列，而如果用户的设备非常缩小列将重新排列自己，以便每列占用可用宽度的100％（这当然是通过使用媒体查询实现的。）

然而，这种设计存在一个问题：每列中的内容量在所有列中都不是恒定的，因此如果在一行中显示两列或更多列，则该行中的任何列都短于该列中的最高列即使下面有其他列，行也会在其下方有空格。

问题示例：http://jsfiddle.net/zyrv30a6/

所以我想知道是否可以保留上述设计的优点并使列填充其上方的可用垂直空间。

我认为我可以通过创建两个包含各列的超级列来解决这个问题，但是这个解决方案会产生一些问题：宽屏用户将被迫每行查看两列，同时保留移动设备的单列视图必须保留旧设计，这将使HTML代码的大小翻倍。

我还应该提一下，从左到右，从上到下排列是很重要的，不能牺牲它来解决这个问题。

Answer 1

添加

float: left

到列类解决这个问题？

Answer 2

这个很有趣。谢谢你提出这个问题。我无法用纯粹的CSS来解决这个问题。但是，如果您有兴趣，我想出了一个jquery解决方案：

$(document).ready(function() {
    var oneColumnDisplayed = $('.column').first().offset().left === $('.column').eq(1).offset().left;
    var twoColumnsDisplayed = $('.column').eq(1).offset().left > $('.column').eq(2).offset().left;
    var threeColumnsDisplayed = !oneColumnDisplayed && !twoColumnsDisplayed; // assumes that three is the absolute maximum amount of columns.
    var colWidth = 250; // change depending on the expected width of all columns
    $('.column').each(function(index, column) {
        // If the display is two columns wide and this one is not in the top row.
        if (twoColumnsDisplayed && index > 1)
        {
            // set this column just below the column above it.
            var columnAbove = $('.column').eq(index - 2);
            var colAboveHeight = $(columnAbove).outerHeight();
            var colAboveBottom = $(columnAbove).offset().top + colAboveHeight;
            var diff = $(column).offset().top - colAboveBottom - 10; // 10 assuming a margin of 5px on each side of the columns
            $(column).css('top', '-' + diff + 'px');
        }
        // If the display is three columns wide and this one is not in the top row.
        if (threeColumnsDisplayed && index > 2)
        {
            // set this column just below the column above it.
            var columnAbove = $('.column').eq(index - 3);
            var colAboveHeight = $(columnAbove).outerHeight();
            var colAboveBottom = $(columnAbove).offset().top + colAboveHeight;
            var diff = $(column).offset().top - colAboveBottom - 10; // 10 assuming a margin of 5px on each side of the columns
            $(column).css('top', '-' + diff + 'px');
        }
    });
});

我还必须将position: relative添加到.column类并将边距更改为5px。这是fiddle。

注意：在所有实际情况中，您可能希望将其放入函数中并确保在窗口调整大小时调用它，否则在调整浏览器大小时一切都会变得疯狂。

使内联div填充垂直空间

2 个答案: