CSS3列スプリットミッドdivの

Question

次のように私は構造を持つWebページを持っている：

<div id="content"> 
    <div class="post"> 
      <p>content1</p> 
    </div> 
    <div class="post"> 
      <p>content2</p> 
    </div> 
    <div class="post"> 
      <p>content3</p> 
    </div> 
    <div class="post"> 
      <p>content4</p> 
    </div> 
</div> 

をそして、私は、このような各div要素の間の距離（マージン）は2列レイアウトのためのCSS3カラムを使用しています.postは上、下、左、右は20pxです。私が抱えている問題は、時には左下のdiv.postの底が切り取られ、右の列の上端で継続するということです。

右の列に分割して表示するのではなく、左の列の下部に留まるのに十分なdiv.postを取得できません。私が得ることができるどんな助けにも感謝します！ありがとう！

また、各div.postの高さが異なる場合があります。左にあるすべてのフローティングがうまくいきません。

EDIT：

#content { 
    margin-bottom:20px; 
    width:910px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 0; 
    -moz-column-count: 2; 
    -moz-column-gap: 0;  
    column-count: 2; 
    column-gap: 0; 
} 

.post { 
    width:410px; 
    margin:20px; 
    padding:10px; 
} 

Answer 1

私はCSS3 columnsを理解するように、これは意図した動作である。ここでは関係CSSです。それらは複数の列、新聞のようなテキストをサポートするように設計されており、各列は次の列に流れます。私はまだ仕様を読んでいないので、ブロックレイアウトのためにそれらを使用することは実行可能かもしれません。

編集：私は今日これを見つけました：controlling wrapping in css3 columns。私はそれを試していないことを認めますが、あなたが何をしているかのように聞こえます。次のコードで内部要素壊す

Answer 2

防止列：CSS Tricks