CSS3列拆分中间分区

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

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

据我所知，这是故意的行为。它们被设计为支持多栏、类似报纸的文本，每一栏都流入下一栏。不过，我还没有读过规范，所以将它们用于块布局可能是可行的

---

编辑：我今天遇到了这个：。我承认我没有尝试过，但听起来像是你想要的。

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

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

---

通过

你也可以发布你的css吗？我在这里重复了这个问题：是的，但我希望有一种方法可以强制div不要像那样破坏列。对于内容布局来说，这似乎是一种理想的行为。对于记录，这些元素位于子元素上，因此在本例中为

.post

。

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