CSS 布局问题。在 4 列中垂直排列 div

Question

我有一个设置了宽度和高度的容器。我里面有 20 个元素。我想将它们垂直排列，每列 4 列，最好在列在 x 轴上溢出时让容器滚动。

content 1    content 5    content 9     content 13    content 17   
content 2    content 6    content 10    content 14    content 18
content 3    content 7    content 11    content 15    content 19
content 4    content 8    content 12    content 16    content 20

有没有一种方法可以只使用 CSS 来实现这一点？

编辑

任何解决方案都必须在 IE9 之前的浏览器中得到支持

jsfiddle

Answer 1

你可以使用flex

.container {
  height:180px;
  background-color:#fff;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.container div{
  margin: 5px;
  height: 30px;
  background-color:red;
  color:white;
  border: solid thin black;
}

<div class="container" style="">

  <div>
    content 1
  </div>
  <div>
    content 2
  </div>
  <div>
    content 3
  </div>
   <div>
    content 4
  </div>
   <div>
    content 5
  </div>
   <div>
    content 6
  </div>
   <div>
    content 7
  </div>
   <div>
    content 8
  </div>
   <div>
    content 9
  </div>
    <div>
    content 10
  </div>
   <div>
    content 11
  </div>
   <div>
    content 12
  </div>
   <div>
    content 13
  </div>
   <div>
    content 14
  </div>
   <div>
    content 15
  </div>
   <div>
    content 16
  </div>
   <div>
    content 17
  </div>
    <div>
    content 18
  </div>
   <div>
    content 19
  </div>
   <div>
    content 20
  </div>  

</div>

---

根据 IE9 要求更新(也适用于 IE8)，使用 display: table 但您可以使用 display: inline-block; 或 float:离开; 以及

.container {
  background-color:#fff;
  display: table;                /* delete this for inline-block and float */
}
.container > div{
  display: table-cell;           /* table-cell   */
  /* display: inline-block;  */  /* or inline             */
  /* float: left;            */  /* or float              */
}
.container > div > div{
  margin: 5px;
  height: 30px;
  background-color:red;
  color:white;
  border: solid thin black;
}

<div class="container" style="">

  <div>
    <div>
      content 1
    </div>
    <div>
      content 2
    </div>
    <div>
      content 3
    </div>
    <div>
      content 4
    </div>
  </div>

  <div>
    <div>
      content 5
    </div>
    <div>
      content 6
    </div>
    <div>
      content 7
    </div>
    <div>
      content 8
    </div>
  </div>

  <div>
    <div>
      content 9
    </div>
    <div>
      content 10
    </div>
    <div>
      content 11
    </div>
    <div>
      content 12
    </div>
  </div>

  <div>
    <div>
      content 13
    </div>
    <div>
      content 14
    </div>
    <div>
      content 15
    </div>
    <div>
      content 16
    </div>
  </div>

  <div>
    <div>
      content 17
    </div>
    <div>
      content 18
    </div>
    <div>
      content 19
    </div>
    <div>
      content 20
    </div>  
  </div>  

</div>