0

動的な数の div (可変高さ) を親 div に読み込みます。次のようにロードする必要があります。

----親 div ------
-div1- -div5-
-div2- -div6-
-div3- -div7-
-div4- -div8-
----------------------

float:left を使用すると、望ましくない方法で積み上げられます。

-div1- -div2-
-div3- -div4-
-div5- -div6-

何か案は？js を使用してオーバーフローした div を検出できますか?

4

2 に答える 2

0

jsFiddle Demo

そこに別のdivを追加して、列をエミュレートします

----parent div ------
--sub-- | --sub--
 -div1- | -div5-
 -div2- | -div6-
 -div3- | -div7-
 -div4- | -div8-
------- | -------
---------------------
于 2013-07-10T03:17:57.143 に答える
0

最新のブラウザのみをターゲットにしている場合

フレックスボックスはこれに最適です:

HTML :

<div class="parentDiv"></div>

CSS : (Chrome で動作します。必要に応じて関連するプレフィックス-ms -moz -oを使用してください)

.parentDiv{
    display:-webkit-flex;
    -webkit-flex-flow: column wrap; 
    width : 60px;
    height: 100px
}
.parentDiv div{
    width:20px;
    height:24px;
}

JS/JQUERY :

$(function() {       
    for(var i=1; i<7; i++)  $(".parentDiv").append($("<div>").text("div"+i));
});

デモ

于 2013-07-10T03:34:06.627 に答える