多列等分布局常常出现在内容中，多数为同功能、同阶级内容的并排显示。
HTML代码
div class = "parent" > div class = "column" > 1 div > div class = "column" > 2 div > div class = "column" > 3 div > div class = "column" > 4 div > div > 1 2 3 4 5 6
1.使用flex来实现多列布局
.parent { display : flex ; } .column { flex : 1 ; } .column + .column { margin-left : 20 px ; } 1 2 3
2.使用table来实现多列布局
.parent { display : table ; table-layout : fixed ; width : 100 % ; } .column { display : table-cell ; padding-left : 20 px ; } 1 2
3.使用float来实现多列布局
.column { float : left ; width : 25 % ; padding-left : 20 px ; box-sizing : border-box ; } 1
提示：使用table和float实现多列布局的时候需要注意，如果要设置背景颜色则必须将.column盒子作为父容器在其里面添加一个子容器，在设置背景颜色，如果直接在.column容器中设置背景颜色会由于padding而无法产生盒子之间的间距。
查看更多关于HTML与CSS布局技巧（三）_html/css_WEB-ITnose的详细内容...