CSS3 Columns Splits Mid-div

Question

J'ai une page web dont la structure est la suivante :

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

J'utilise des colonnes CSS3 pour une mise en page en deux colonnes, de sorte que la distance (marge) entre chaque div.post au-dessus, au-dessous, à gauche et à droite est de 20px. Le problème que je rencontre est que, parfois, le bas du div.post situé en bas à gauche est coupé et continue en haut de la colonne de droite.

J'ai du mal à faire en sorte que le div.post complet reste en bas de la colonne de gauche au lieu de se diviser et de finir de s'afficher sur la colonne de droite. J'apprécierais toute aide que je pourrais obtenir ! Merci !

En outre, la hauteur de chaque div.post peut varier, de sorte que le fait de tout faire flotter vers la gauche ne fonctionne pas bien (c'est désordonné).

EDIT : voici le CSS correspondant :

#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

Empêchez les colonnes de se briser à l'intérieur des éléments avec le code suivant :

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

via Trucs et astuces CSS

Answer 2

Comme je le comprends Colonnes CSS3 c'est le comportement souhaité. Elles sont conçues pour prendre en charge les textes en plusieurs colonnes, de type journal, où chaque colonne s'imbrique dans la suivante. Je n'ai pas encore lu la spécification, cependant, donc les utiliser pour la mise en page des blocs peut être faisable.

Edit : Je suis tombé sur ceci aujourd'hui : contrôle de l'habillage des colonnes en css3 . J'admets ne pas l'avoir essayé, mais cela ressemble à ce que vous recherchez.