CSS 仅网格布局

Question

我目前正尝试用 HTML/CSS 创建一个 grid-layout 只是出于各种原因（我知道 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>

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

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

TITLE   -    TITLE   -    TITLE
  ul           ul           ul

-

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

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

所有这一切都没有框架。

提前致谢

Answer 1

你的意思是这样的？ https://jsfiddle.net/jw22Lqgo/

h3 {
display: inline-block;
}

ul{
 display: block;
}

.col {
width: 32%;
border: 1px solid red;
display: inline-block;
}

.container {
width: 960px;
}

Answer 2

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

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

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

在视觉上进行 left-to-right 构建

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>

CSS 仅网格布局

CSS only grid layout

css

grid

html-lists

css-float