为什么 css 列分隔 HTML 块？

Question

我正在尝试创建一个带有图像的砖石网格结构。更具体地说，我正在渲染一个 <figure> 元素列表，其中包含 <img> 和 <figcaption> 子元素。但是，当我在浏览器中显示数据时，图像和图形说明是分开的。

我正在使用 Tailwind CSS 进行样式设置。

为什么会这样，我该如何解决？

我试过使用 flexbox 和网格，但它们 1) 不如普通列那么精确，2) 无论如何都没有达到我想要的效果

Answer 1

您只需要对 <figure> 元素使用 break-inside: avoid-column，这样元素就不会跨多个列：

figure {
  break-inside: avoid-column;
}

请参阅下面的概念验证，使用从您的 CodePen 复制的标记：

div {
  max-width: 1200px;
  margin: 0 auto;
  columns: 3;
  column-gap: 15px;
}

figure {
  break-inside: avoid-column;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="">
  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/6059CAD8-02E8-2E00-2922DF84800167E0.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>

  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/3C7AC799-1DD8-B71B-0B4E94DE10F014E5.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>

  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/3C7AC355-1DD8-B71B-0B9C2F07853F39F1.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>

  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/3C7AC4C1-1DD8-B71B-0B8592CA6634ABEE.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>

  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/3C7AC638-1DD8-B71B-0BD28B3407821A15.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>

  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/3C7AC8F5-1DD8-B71B-0B661B7FF90F5407.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>
</div>

为什么 css 列分隔 HTML 块？

Why does css columns separate HTML blocks?

css

multiple-columns

masonry

tailwind-css