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>の が 1 つのテーブル セルにスタックされていることを前提としています。

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。