如何将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。