Question

我正在尝试使用float：left。

垂直堆叠div

但默认情况下它们会水平堆叠。

使用css的任何解决方案？

我想得到：

> +-----+-----+-----+
> |  1  |  6  |  11 |
> +-----+-----+-----+
> |  2  |  7  |  12 |
> +-----+-----+-----+
> |  3  |  8  |  13 |
> +-----+-----+-----+
> |  4  |  9  |  14 |
> +-----+-----+-----+
> |  5  |  10 |  15 |
> +-----+-----+-----+

这就是我得到的：

> +-----+-----+-----+
> |  1  |  2  |  3  |
> +-----+-----+-----+
> |  4  |  5  |  6  |
> +-----+-----+-----+
> |  7  |  8  |  9  |
> +-----+-----+-----+
> |  10 |  11 |  12 |
> +-----+-----+-----+
> |  13 |  14 |  15 |
> +-----+-----+-----+

我要重新排列的div的图像：

每个div包含一个数字，一个图像和一个名称。这是div的代码：

#championsWrapper {
    float: left;
    width: 180px;
}

Answer 1

在所有div上使用display:inline-block就像这样。

＆＃13;

.champion-wrapper{
  width:150px;
  display:inline-block;
}

＆＃13;

<div class="champion-wrapper">1</div>
<div class="champion-wrapper">2</div>
<div class="champion-wrapper">3</div>
<div class="champion-wrapper">4</div>
<div class="champion-wrapper">5</div>
<div class="champion-wrapper">6</div>
<div class="champion-wrapper">7</div>
<div class="champion-wrapper">8</div>
<div class="champion-wrapper">9</div>
<div class="champion-wrapper">10</div>

＆＃13;

Answer 2

您可以使用columns like this

#champions { 
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
}

Answer 3

我建议使用CSS列，使用column-count（以及此属性的各种供应商前缀）：

#container {
  -moz-column-count: 3;
  -ms-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}
#container div {
  background-color: #fff;
}
#container div:nth-child(odd) {
  background-color: #ccc;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
  <div class="item">19</div>
  <div class="item">20</div>
  <div class="item">21</div>
</div>

如果需要，您可以使用column-rule属性添加垂直线，以使用与border属性相同的语法（column-rule-width column-rule-style {{来直观地分隔列。 1}}）：

column-rule-color

#container {
  -moz-column-count: 3;
  -ms-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-rule: 2px solid #999;
  -ms-column-rule: 2px solid #999;
  -webkit-column-rule: 2px solid #999;
  column-rule: 2px solid #999;
}

#container div {
  background-color: #fff;
}

#container div:nth-child(odd) {
  background-color: #ccc;
}

当然，使用<div id="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> <div class="item">12</div> <div class="item">13</div> <div class="item">14</div> <div class="item">15</div> <div class="item">16</div> <div class="item">17</div> <div class="item">18</div> <div class="item">19</div> <div class="item">20</div> <div class="item">21</div> </div>：

调整列之间的装订线

column-gap

#container {
  -moz-column-count: 3;
  -ms-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-rule: 2px solid #999;
  -ms-column-rule: 2px solid #999;
  -webkit-column-rule: 2px solid #999;
  column-rule: 2px solid #999;
  -moz-column-gap: 3em;
  -ms-column-gap: 3em;
  -webkit-column-gap: 3em;
  column-gap: 3em;
}
#container div {
  background-color: #fff;
}
#container div:nth-child(odd) {
  background-color: #ccc;
}

参考文献：

使用float时堆栈垂直div

3 个答案: