CSS3 Cột Tách Mid-div

Question

Tôi đã có một trang web với cấu trúc như sau:

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

Và tôi đang sử dụng cột CSS3 cho một bố cục 2 cột như vậy mà khoảng cách (margin) giữa mỗi div .post ở trên, bên dưới, bên trái và bên phải là 20px. Vấn đề tôi gặp phải là đôi khi đáy của div.post dưới cùng bên trái bị cắt nhỏ và tiếp tục ở trên cùng của cột bên phải.

Tôi gặp sự cố khi nhận toàn bộ div.post để ở dưới cùng của cột bên trái thay vì tách và hoàn thành hiển thị ở cột bên phải. Tôi đánh giá cao bất kỳ sự trợ giúp nào tôi có thể nhận được! Cảm ơn!

Ngoài ra, chiều cao của mỗi div.post có thể khác nhau, do đó, mọi thứ nổi ở bên trái không hoạt động tốt (nó lộn xộn).

EDIT: đây là CSS liên quan:

hành vi

#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

Theo tôi được biết CSS3 columns, điều này được dự định. Chúng được thiết kế để hỗ trợ văn bản nhiều cột, giống như tờ báo, trong đó mỗi cột sẽ chuyển sang cột tiếp theo. Tuy nhiên, tôi chưa đọc thông số kỹ thuật, vì vậy việc sử dụng chúng để bố cục khối có thể thực hiện được.

Chỉnh sửa: Tôi đã xem xét điều này hôm nay: controlling wrapping in css3 columns. Tôi thừa nhận tôi đã không thử nó, nhưng nó âm thanh như những gì bạn đang sau.

Answer 2

cột Ngăn chặn phá vỡ các yếu tố bên trong với đoạn mã sau:

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

qua CSS Tricks