如何将n个div垂直叠加到n个宽度？

Question

我得到了一个设计，其中有许多可变高度的物品垂直堆放在固定高度的容器中，宽度可变。所以我的想法是这些项目可以滚动屏幕（将在包装中），以便它们可以水平滚动到屏幕上。

我很难找到一种可靠的方式来组织div，以便它们可靠地堆叠。这是我想要实现的目标。

Answer 1

试试这个 - DEMO

<强> HTML

<section>
    <div style="height: 100px;"> 1 </div>
    <div style="height: 50px;"> 2 </div>
    <div style="height: 150px;"> 3 </div>
    <div style="height: 300px;"> 4 </div>
    <div style="height: 50px;"> 5 </div>
    <div style="height: 100px;"> 6 </div>
    <div style="height: 100px;"> 7 </div>
    <div style="height: 70px;"> 8 </div>
</section>

<强> CSS

section {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;

    height: 400px;
    background: beige;
}


div {
    width: 200px;
    margin: 0 10px 10px;
    background: orange;
    display: inline-table;
}

Answer 2

之前我遇到过这种情况，除了使用Javascript之外我找不到任何解决方案。遵循使用 jQuery 的示例脚本，该脚本假设最初所有<div>都堆叠在一个表格单元格中。

var maxH = 600; //can be anything
function fix() {
    var row = document.getElementById("tbl").rows[0];
    for(var i = 0; i < row.cells.length; i ++) {
        var cur = row.cells[i];
        if($(cur).height() > maxH) {
            var newcell = row.insertCell(row.cells.length);
            newcell.vAlign = "top";
            newcell.style.paddingLeft = "10px";
            while($(cur).height() > maxH) {
               $(cur).children().last().detach().appendTo(newcell);
            }
        }
    }
}

工作演示：JSFiddle。