CSS3列拆分Mid-div

Question

我有一个结构如下的网页:

<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>

我正在使用CSS3列进行2列布局,使得上方,下方,左侧和右侧的每个div.post之间的距离(边距)为20px.我遇到的问题是,有时左下方div.post的底部被切断并继续在右列的顶部.

我无法将完整的div.post保留在左列的底部,而不是分割并完成右列的显示.我很感激我能得到任何帮助!谢谢!

此外,每个div.post的高度可能会有所不同,因此向左浮动所有内容都不会很好(它很乱).

编辑:这是相关的CSS:

#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

使用以下代码防止列在元素内部中断：

-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

通过CSS 技巧

Answer 2

据我了解CSS3列,这是预期的行为.它们旨在支持多列,类似报纸的文本,其中每列都流入下一列.但是我还没有阅读规范,因此使用它们进行块布局可能是可行的.

编辑:今天我遇到了这个:控制css3列中的包装.我承认我没有尝试过,但听起来就像你追求的那样.