CSS3-столбцы разделены средним делением

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 столбцы для двухколоночного макета, так что расстояние (поле) между каждым 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

Как я понимаю CSS3 столбцы , это предполагаемое поведение. Они предназначены для поддержки многоколоночного, похожего на газету текста, где каждый столбец перетекает в следующий. Однако я еще не читал спецификации, поэтому их использование для компоновки блоков может быть выполнимо.

Редактировать: я сталкивался с этим сегодня: управление переносом в столбцы css3 . Я признаю, что я не пробовал это, но это похоже на то, что вы ищете.

Answer 2

Предотвращение разбиения столбцов внутри элементов с помощью следующего кода:

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

через CSS Tricks