css - 如何将n个div垂直堆叠到n个宽度？

Question

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

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

Answer 1

试试这个 -演示

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>的 s 都堆叠在一个表格单元格中。

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。