多列布局中的列宽属性

Question

代码：

<div class="test">content</div>

.test{
    width:500px;
    border:1px solid red;
      column-width: 100px;
}

我有一栏。但我想要4列。

然后我添加了属性

column-count: 4;

但列宽！= 100px。为什么？

Answer 1

试试这个演示：https://jsfiddle.net/9ympv93L/

<强> CSS

 -webkit-columns: 4 100px;
  -moz-columns: 4 100px;
  columns: 4 100px;

Answer 2

u have to set the 

.test {
    width: 100%;
}

Answer 3

试试这个

<div class="test">content</div>

.test{
     -webkit-column-width: 100px; /* Chrome, Safari, Opera */
     -moz-column-width: 100px; /* Firefox */
     column-width: 100px;
     -webkit-column-count: 4;
     -moz-column-count: 4; /* Firefox */
}