使用CSS将容器div划分为列

Question

好，所以代码看起来像这样。

<div class="container">
    <div class="main-one"></div>
    <div class="common"></div>
    <div class="common"></div>
    <div class="common"></div>
    <div class="main-two"></div>
    <div class="common"></div>
    <div class="common"></div>
    <div class="common"></div>
    <div class="main-three"></div>
    <div class="common"></div>
    <div class="common"></div>
    <div class="common"></div>
</div>

目前，所有div在container中创建一列（它们全部以display: block出现在另一列之下）。我要实现的是：3列，每列包含1个main- div（标题-它仅出现在列的顶部）和3个common div，它们位于以下位置的main-代码。

有什么方法可以仅使用CSS（没有CSS网格）来执行此操作，而无需创建内部容器或JS？也许以某种方式屈曲？当我无法更改结构时，这对我来说很难。

这是现在的样子：https://jsfiddle.net/bh1pk7ty/

这就是我想要的样子：https://jsfiddle.net/z0nwoqsx/

Answer 1

列

您可以使用columns和现有标记来完成此操作。

.container {
  columns: 3;
}

[class^="main-"] {
  background: red;
  break-before: column;
}

.common {
  background: green;
}

<div class="container">
  <div class="main-one">main-one</div>
  <div class="common">common 1</div>
  <div class="common">common 1</div>
  <div class="common">common 1</div>
  <div class="common">common 1</div>

  <div class="main-two">main-two</div>
  <div class="common">common 2</div>
  <div class="common">common 2</div>
  <div class="common">common 2</div>
  <div class="common">common 2</div>
  <div class="common">common 2</div>
  <div class="common">common 2</div>
  
  <div class="main-three">main-three</div>
  <div class="common">common 3</div>
  <div class="common">common 3</div>
  <div class="common">common 3</div>
</div>

---

Flexbox

除非您可以更改标记的结构，或添加某种类型的额外信息以挂接到钩子，否则使用Flexbox可能是最好的选择。

注意：这不会保留每个columns所属的.common，因为flexbox只能将每个.common放在下一个可用空间中

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  flex: 0 1 33%;
}

[class^="main-"] {
  order: 0;
  background: red
}

.common {
  order: 1;
  background: green
}

<div class="container">
  <div class="main-one">main-one</div>
  <div class="common">common 1</div>
  <div class="common">common 1</div>
  <div class="common">common 1</div>
  
  <div class="main-two">main-two</div>
  <div class="common">common 2</div>
  <div class="common">common 2</div>
  <div class="common">common 2</div>
  
  <div class="main-three">main-three</div>
  <div class="common">common 3</div>
  <div class="common">common 3</div>
  <div class="common">common 3</div>
</div>

---

网格

但是如果您可以更改标记，也可以只使用网格。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 10px;
  grid-auto-flow: dense;
}

[class^="main-"] {
  background: red;
  //break-before:column;
  // grid-column-start: 1;
}

[class*="-one"] {
  grid-column-start: 1;
  grid-column-end: 2;
}

[class*="-two"] {
  grid-column-start: 2;
  grid-column-end: 3;
}

[class*="-three"] {
  grid-column-start: 3;
  grid-column-end: 4;
}

[class^="common-"] {
  background: green;
}

<div class="container">
  <div class="main-one">main-one</div>
  <div class="common-one">common 1</div>
  <div class="common-one">common 1</div>
  <div class="common-one">common 1</div>
  <div class="common-one">common 1</div>

  <div class="main-two">main-two</div>
  <div class="common-two">common 2</div>
  <div class="common-two">common 2</div>
  <div class="common-two">common 2</div>
  <div class="common-two">common 2</div>
  <div class="common-two">common 2</div>
  <div class="common-two">common 2</div>

  <div class="main-three">main-three</div>
  <div class="common-three">common 3</div>
  <div class="common-three">common 3</div>
  <div class="common-three">common 3</div>
</div>