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