如何对 HTML 元素进行分组，以便它们在具有 "columns" 样式的 div 中一起移动？

Question

我正在使用带有 Minima 的基本 Jekyll 站点 CSS。我想使用包含两列内容的 post 格式：

<div style="columns: 2;">...</div>

每个内容组由一个 link、一个图像标签、一个用 p-tags 括起来的标题和一个分隔符组成。

我要大家一起行动。每个 link/image/title/break 构造应保留在同一列中。

我试过用 div 和部分标签围绕每个组 - 没有成功。

建议？

Answer 1

为了防止使用列的父项的子项跨列，您可以将它们包装在 display: inline-block.

的容器中

您为这个容器使用的具体标签由您决定。如果您想使用 section，请使用它。

示例：

ul {
  column-count: 2;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

li {
  display: inline-block;
  border-bottom: 1px solid gray;
  padding-bottom: 12px;
}

<ul>
  <li>
    <div>
      <p>I won't break across columns!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
    </div>
  </li>
  <li>
    <div>
      <p>I won't break across columns!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
    </div>
  </li>
  <li>
    <div>
      <p>I won't break across columns!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
    </div>
  </li>
</ul>

如何对 HTML 元素进行分组，以便它们在具有 "columns" 样式的 div 中一起移动？

How to group HTML elements so they move together within a div with a "columns" styling?

html

css

jekyll