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的浏览器中得到支持

斯菲德尔

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: left;

.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>

Answer 2

在这里检查：动态布局

基本上你设置了一个最小宽度

min-width: 200px;

因此，当div 低于该大小时，它将进入下一行。此外，不要为容器设置固定宽度，否则在调整窗口大小时它不会缩小。

Answer 3

代码的问题在于您将固定大小（5px 的边距）与百分比（填充和宽度）混合在一起

如果您仅使用百分比并检查大小，则可以获得它jsFiddle 2

最大值为 100%

.container div{
  float: left;
  margin: 0px 0px 1% 1%x;
  width: 22%;
  background-color:red;
  color:white;
  padding:1%;
  border: solid thin black;
}

你有 4 列，所以4*22%+4*1%（保证金）+4*2*1%（填充为左右）= 100%

在您的示例中，您可能超过了 100%，然后第 4 个框下降

否则，如果可以使用外部组件，则可以使用类似引导表的东西http://getbootstrap.com/css/