仅 CSS 网格布局

Question

出于各种原因，我目前正在尝试使用 HTML/CSS 创建网格布局(我知道 Bootstrap 等，但在这种情况下没有选择，而且我无法添加标记元素)。

我有以下代码(容器 div，每次都有一个带有 ul 和 li 的标题):

<div>
  <h3>title here</h3>
  <ul>
    <li>list-item</li>
    <li>list-item</li>
    <li>list-item</li>
  </ul>
  <h3>title 2 here</h3>
  <ul>
    <li>list-item</li>
    <li>list-item</li>
  </ul>
  <h3>title 3 here</h3>
  <ul>
    <li>list-item</li>
  </ul>
</div>

现在我希望能够创建一个网格布局。意思例如每个标题的宽度为 33%，因此我可以将 3 个标题并排放置。

问题是每次之间都有一个ul。那么有没有可能的 float 解决方案，这样我就可以得到一个网格布局。

TITLE   -    TITLE   -    TITLE
  ul           ul           ul

-

h3 {
  width: 33%;
  float: left;
  display: inline-block;
}

ul{
  float: left;
  width: 33%;
  display: inline-block;
}

所有这些都没有框架。

提前致谢

Answer 1

这是一个使用现有标记的示例

请注意它们是从上到下流动的，而不是从左到右流动的。

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 220px;              /*  30px + 80px times 2 row */
}
div > * {
  width: 33.33%;
  box-sizing: border-box;
}

h3 {
  margin: 0;
  height: 30px;
}
ul {
  margin: 0;
  height: 80px;
}

<div>
  <h3>title here</h3>
  <ul>
    <li>list-item</li>
    <li>list-item</li>
    <li>list-item</li>
  </ul>
  <h3>title 2 here</h3>
  <ul>
    <li>list-item</li>
    <li>list-item</li>
  </ul>
  <h3>title 3 here</h3>
  <ul>
    <li>list-item</li>
  </ul>
  <h3>title 2 here</h3>
  <ul>
    <li>list-item</li>
    <li>list-item</li>
  </ul>
  <h3>title 3 here</h3>
  <ul>
    <li>list-item</li>
  </ul>
</div>

---

根据评论更新

通过使用 order 属性，可以在视觉上进行从左到右的构建

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 220px;              /*  30px + 80px times 2 row */
}
div > * {
  width: 33.33%;
  box-sizing: border-box;
}
h3 {
  margin: 0;
  height: 30px;
}
ul {
  margin: 0;
  height: 80px;
}
div :nth-child(3),
div :nth-child(4) {
  order: 2;
}
div :nth-child(5),
div :nth-child(6) {
  order: 4;
}
div :nth-child(7),
div :nth-child(8) {
  order: 1;
}
div :nth-child(9),
div :nth-child(10) {
  order: 3;
}

<div>
  <h3>title 1 here</h3>
  <ul>
    <li>1 list-item</li>
    <li>1 list-item</li>
    <li>1 list-item</li>
  </ul>
  <h3>title 2 here</h3>
  <ul>
    <li>2 list-item</li>
    <li>2 list-item</li>
  </ul>
  <h3>title 3 here</h3>
  <ul>
    <li>3 list-item</li>
  </ul>
  <h3>title 4 here</h3>
  <ul>
    <li>4 list-item</li>
    <li>4 list-item</li>
  </ul>
  <h3>title 5 here</h3>
  <ul>
    <li>5 list-item</li>
  </ul>
</div>