css - CSS3 列 2 項目の動作

Question

編集：まあ、これは奇妙です。私はそれをいじっていましたが、マージンを拡張して .blockData を 400px (列の幅) よりも大きくすると、期待どおりに 2 番目の項目が下に追加されることがわかりました。そうしないと、最初の項目の右側に 2 番目の項目が追加され、予期しない結果が生じます。私は答えに満足していますが、それは少しハックのようです:/. 以下の動作について誰かが説明を持っている場合は、ぜひ聞きたいです。

よし、stackoverflow の優秀な人々のおかげで、必要なものはほとんど揃っています。私は入札を行うために CSS3 列を取得しようとしています。問題は実際にはクロムにあります。.blockdata次のページでは、列化された.maincontentコンテナーに3 つ以上のdivdivがある場合は期待どおりに動作しますが、そこに div が 2 つしかない場合.blockdataは、列を無視して並べて配置します。これは、クロム (Firefox と IE 10 でテスト済み) でのみ発生し、2 つのアイテムでのみ発生します。フィドルを投稿したので、私の意味がわかります。

デモ: http://jsfiddle.net/NMZhU/

maincontent div 内に次のような多数の div があります。

<div class="blockData">
    <a class="listData" href="#">Activity11</a>
    <a class="listDelete" href="#"><img width="30px" src="http://localhost/view/images/Delete.png"/></a>
    <a class="listEdit" href="#"><img width="30px" src="http://localhost/view/images/Settings.png"/></a>
</div>

CSS を使用:

#mainContent /* The containing div */
{
    position: absolute;
    top: 50px;
    bottom: 50px;   
    margin: 10px;   
    column-width: 400px;
    -webkit-column-width: 400px;
    -moz-column-width: 400px;
    -webkit-column-break-inside : avoid;
    -moz-column-break-inside : avoid;
    column-gap: 10px;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
}

.blockData /* The divs inside are all of this class */
{
    position: relative;
    width: 380px;
    height: 30px;
    padding: 4px;
    margin: 0px 0px 10px 0;
    border: 4px outset grey;
    background: lightgrey;
    display: inline-block;
}

2 つを除くすべての .blockData div を削除すると、予期しない動作が表示されます (Chrome のみ)。これを回避する方法がない場合は理解できますが、これで解決する前に確認したいと思います。