html - スタックフロートCSS

Question

問題: CSS だけではフロートをスタックできません。

http://jsfiddle.net/9YQXP/7/の例では、幅がコンテナーの 35% である 3 つの div があります。各 div の高さは事前にわかりませんが、3 番目の div を最初の div のすぐ下に配置したいと思います。

HTML

<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>

CSS

div {
    text-align: center;
    float: left;
    width: 35%;
    border: 1px solid #000;
}
#a1, #a3 {
    height:20px
}
#a2 {
    height:30px
}

その他の回答:同様の質問 ( Float stacking css ) が http://masonry.desandro.com/へのリンクで回答されています。しかし、それはjavascriptソリューションで回答されており、私もCSSのみ（または石積みの実例）を好むでしょう。

score 2 · Accepted Answer

これはCSSだけではできません。フロートの仕様ごと：

5) フローティングボックスの外側の上部は、ソースドキュメントの前の要素によって生成されたブロックまたはフローティングボックスの外側の上部よりも高くすることはできません。

1 に答える 1