CSS3 Colonne Split Mid-div

Question

Ho una pagina web con struttura come segue:

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

e sto usando colonne CSS3 per un layout a 2 colonne in modo tale che la distanza (margine) tra ogni div .post sopra, sotto, a sinistra, e a destra è 20px. Il problema che sto avendo è che a volte la parte inferiore del div.post in basso a sinistra viene troncata e continua nella parte superiore della colonna di destra.

Non riesco a ottenere il div.post completo per rimanere nella parte inferiore della colonna sinistra anziché dividere e terminare la visualizzazione sulla colonna destra. Apprezzerei qualsiasi aiuto che posso ottenere! Grazie!

Inoltre, l'altezza di ogni div.post può variare, quindi il flottaggio tutto a sinistra non funziona bene (è disordinato).

EDIT: ecco il CSS:

comportamento

#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

quanto ho capito CSS3 columns, questo è destinato. Sono progettati per supportare il testo multi-column, simile a un giornale, in cui ogni colonna scorre nel successivo. Non ho ancora letto le specifiche, però, quindi usarle per il layout dei blocchi può essere fattibile.

Modifica: mi sono imbattuto in questo oggi: controlling wrapping in css3 columns. Ammetto di non averlo provato, ma suona come quello che cerchi.

Answer 2

colonne evitare la rottura elementi all'interno con il seguente codice:

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

via CSS Tricks