问答详情
源自：10-1 CSS3 多列布局——Columns

多列布局问题

.columns {

  width: 500px;

  padding: 5px;

  border: 1px solid green;

  margin: 20px auto; 

  -webkit-columns:50px 3;

  -moz-columns:50px 3;

  -o-columns:50px 3;

  -ms-columns:50px 3;

  columns:50px 3;

}

为什么我把列的宽度变为50px没有变化呢，是哪里的原因呢？

提问者：安静的学者 2017-08-19 09:35

个回答

  • 心陌灬琉璃梦
    2017-08-19 12:56:37
    已采纳

    ① div宽度500=列宽x+列间距y，(div宽度500-列间距y) ÷ 列数3 ≈ 每列最大宽度z。在宽度500不变的情况下，自定义列宽只要≤每列最大宽度z，就能保持三列的布局；【经本人测试，最大列宽是155px】

    ② 宽度500不变的情况下，只要自定义列宽≤每列最大宽度z，即只要自定义列宽≤155px，无论你的列宽设置是什么数值，列宽不会发生任何变化；

    ③ 只有当div宽度或文本内容长度发生变化时，布局才会发生变化。

    2