CSS - 带列的布局

Question

我必须做这样的布局: (如果可能，没有任何插件)。

我以为我可以用 CSS 列来制作这个布局，但我无法让它按我想要的方式工作。我怎样才能告诉浏览器不要将某些列切成两半？ 这是我的代码:

main {
  width: 1253px;    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}
article {
  margin-bottom: 1em;
  border: 1px solid red;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<main>
<article>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, esse? Eveniet illum, a hic consequatur ipsa magni maiores eius cupiditate animi odio. Expedita nemo ullam incidunt, facilis optio aliquid, quia!</div>
  <div>Vel, consectetur assumenda possimus sed exercitationem aliquam quo unde, harum et dolor molestiae debitis aperiam, maxime distinctio quam dolorem tempora odit tempore. Ea accusamus velit cupiditate fuga corporis officiis aspernatur.</div>
  <div>Iusto, hic, non suscipit similique eum quos, eveniet dolorum quam atque dolorem sed fugiat, vero deleniti exercitationem recusandae modi libero. Consectetur in non neque facilis, harum. Vel consequatur doloribus id!</div>
</article>
<article>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab et, repudiandae iste commodi eveniet est facilis illum ad voluptas voluptate nisi, ipsam aliquam reiciendis eius alias vero dicta delectus adipisci.</div>
  <div>Atque, cumque, beatae. Quo nihil delectus, officia beatae rem nisi impedit ad iusto ipsum suscipit asperiores aliquam assumenda corporis voluptates repudiandae animi rerum, ab quasi doloremque dolorum modi saepe exercitationem.</div>
  <div>Quo, soluta, ipsum. Soluta, tenetur deleniti accusantium, ratione officia perferendis eius facilis sit blanditiis et dolorum cum illo, dolorem illum magnam repudiandae earum minus esse nobis ullam. Dignissimos, ratione, repellendus.</div>
</article>
<article>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et recusandae totam cumque veritatis laboriosam, ducimus sit ad quibusdam culpa dolorem, qui ut. Quasi suscipit, nostrum! Ratione aspernatur error molestiae, delectus.</div>
  <div>Voluptatum temporibus animi optio eum sequi voluptate excepturi magnam impedit, quo, vero explicabo laborum, placeat! Modi voluptatibus excepturi non? Laboriosam in aspernatur ullam veniam laudantium, corrupti dignissimos optio voluptas earum?</div>
  <div>Recusandae, dolor, sapiente? Quo nemo hic laborum eius. Fugit laborum id magnam, voluptas voluptatum harum ut sapiente sequi aperiam illum impedit molestiae? Non id quo nisi recusandae expedita excepturi, quae!</div>
</article>
<article>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis assumenda, adipisci magnam cupiditate dicta tenetur quia harum sint, esse suscipit quos repudiandae ad, porro amet expedita nemo dolorum quasi provident.</div>
  <div>Aliquid consectetur impedit fugit tenetur harum sequi accusamus minus atque quasi, quas repudiandae, commodi. Beatae, quam! Mollitia alias totam enim vel rem voluptatum, obcaecati sapiente odit sunt necessitatibus aperiam doloremque!</div>
  <div>Suscipit ipsa consequatur eum porro, dolorem. Tenetur molestiae sint nostrum eaque illum ipsum perferendis officiis ab, consectetur enim ratione delectus atque, assumenda impedit. Suscipit id reprehenderit quisquam voluptatum ipsa quasi.</div>
</article>
<article>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In impedit culpa, incidunt illo nesciunt officia, recusandae aut necessitatibus perferendis? Molestias repellendus cumque a adipisci, nesciunt ratione eius libero ut soluta.</div>
  <div>Quas neque aspernatur temporibus beatae consequuntur, reprehenderit cumque necessitatibus facere omnis et perspiciatis. Dolore officia omnis, nostrum corrupti eum ad labore, eius veniam iste voluptate rerum assumenda saepe, dolorum vero.</div>
  <div>Suscipit, molestiae? Atque numquam a eum nostrum nobis sed, commodi, molestias obcaecati velit aliquid quibusdam minima ullam quidem illum earum, perspiciatis officia! Sed ad laboriosam facere alias corporis cumque dolorum.</div>
</article>
<article>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga voluptatum laudantium maxime optio, quidem ad adipisci. Minus sed odio accusamus magnam rem! Dicta recusandae, adipisci autem aliquam asperiores, obcaecati culpa?</div>
  <div>Commodi dolorum aliquid autem ab placeat ex facere magnam itaque obcaecati? Aspernatur eius nobis sit a sed sunt rem ducimus, id aut necessitatibus maxime consectetur officiis voluptas distinctio! Error, omnis!</div>
  <div>Maxime doloremque laboriosam eveniet non pariatur ut sequi, nemo ea distinctio quos accusamus! Eum, ratione doloribus deserunt, corporis facilis, odit officia in quas sed modi, molestias sit. Tenetur, eaque, minima.</div>
</article>
<article>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus facilis unde eveniet culpa praesentium omnis itaque, fugiat nihil iusto blanditiis, veniam perferendis ipsa tempore corporis dolor veritatis quod quisquam saepe.</div>
  <div>Omnis, odio, quia! Perspiciatis iusto illo ducimus, minima voluptas! Officia recusandae doloremque nobis ab ipsam nulla autem eius, rerum expedita? Rem beatae fuga accusamus blanditiis odit praesentium eligendi recusandae est.</div>
  <div>Ullam sequi consectetur perferendis obcaecati, minima fugit nulla quasi provident dolorum quia error veniam necessitatibus voluptatibus ea, exercitationem quo est! Ullam vero, officia iste beatae totam ipsam dolor rerum consectetur.</div>
</article>
<article>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae numquam doloremque eaque fugiat veritatis sit tenetur facilis, officia impedit, rem, unde suscipit libero eius quisquam sunt natus saepe beatae expedita?</div>
  <div>Voluptatum deserunt, esse ipsam dolor provident accusantium accusamus, impedit a obcaecati facilis asperiores. In officia tempora voluptas, ad rem nihil ratione, incidunt maiores et aspernatur mollitia dolorem excepturi quam cum.</div>
  <div>Nobis non voluptatibus doloremque quidem placeat provident expedita dolor id odit quas dolorum labore totam ducimus recusandae voluptatum quis explicabo, autem nihil atque vel aliquam laborum distinctio, quaerat itaque. Impedit.</div>
</article>
<article>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laudantium ea omnis nihil aut. Culpa eligendi velit harum iusto aperiam, error possimus fuga adipisci officiis laudantium sapiente officia. Rem, quam.</div>
  <div>Placeat impedit sequi tempora assumenda quisquam ad eum repudiandae ab perspiciatis expedita accusamus possimus qui non, id ratione aperiam, quae dolores tenetur culpa debitis est, nostrum quasi autem. Delectus, fugiat!</div>
  <div>Sunt aut laboriosam perspiciatis maiores tenetur, beatae laborum impedit quis debitis porro animi explicabo esse magni cum nihil unde quod veritatis, quibusdam saepe sapiente placeat illo mollitia assumenda? Expedita, ea.</div>
</article>

</main>

如您所见，一些列被切成两半。 :(

有人可以帮助我吗？我该怎么办？

Answer 1

添加display: inline-block;到article

https://jsfiddle.net/7f9so74a/1/