修改

Question

我想在3列中布置我的div。我正在使用列数。我将包装尺寸设置为1000x300px，这应该适合3x5 div。 div如何从包装中散开而不适合内部？

<div id="wrapper">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  ...
</div>

https://jsfiddle.net/nhmu3ws0/

编辑：

我想用divs实现这个布局：

1 4 7 ...
2 5 8
3 6 9

答案：

我实际上需要这个：

display: flex;
flex-direction: column;
flex-wrap: wrap;

Answer 1

修改

因此，要实现更新后问题中描述的布局，您需要删除column-count属性，因为这会将列限制为三个。

要在每个列中包含三个100px高div的无限数量的列，请将父级的高度限制为3×100px，即300px，并且只需定义column-width属性。

实施例： https://jsfiddle.net/nhmu3ws0/2/

因为如果列不适合父元素的范围，列将重复超出包含的父元素。

在你的小提琴中，你已经将包装元素的高度定义为300px。你的小提琴在包装内有15个div。您不能在300px高度的父级中容纳15×100px div。

父级需要足够高以容纳组合div的总高度除以列数。因此，在您的小提琴的情况下，父母需要高度为500px（即（15×100）/ 3）。

HTML：

<div id="wrapper">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>

  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>

  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>

  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>

  <div class="box">12</div>
  <div class="box">13</div>
  <div class="box">14</div>

</div>

CSS：

#wrapper {
  position: absolute;
  width: 1000px;
  height: 500px;
  background: green;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -webkit-column-width: 200px;
  -moz-column-width: 200px;
  column-width: 200px;
}

.box {
  width: 200px;
  height: 100px;
  background: red;
  font-size: 30px;
  color: #fff;
}

https://jsfiddle.net/nhmu3ws0/1/

带列数的Css3 div布局

1 个答案:

修改