HTML与CSS布局技巧（三）_html/css_WEB-ITnose

多列等分布局常常出现在内容中，多数为同功能、同阶级内容的并排显示。

HTML代码

<div class="parent"> <div class="column">1div> <div class="column">2div> <div class="column">3div> <div class="column">4div> div>

• 1
• 2
• 3
• 4
• 5
• 6

1.使用flex来实现多列布局

.parent{display: flex;} .column{flex: 1;} .column+ .column{margin-left: 20px;}

• 1
• 2
• 3

2.使用table来实现多列布局

.parent{display: table; table-layout: fixed; width: 100%;} .column{display: table-cell; padding-left: 20px;}

• 1
• 2

3.使用float来实现多列布局

.column{float: left; width: 25%; padding-left: 20px; box-sizing: border-box;}

• 1

提示：使用table和float实现多列布局的时候需要注意，如果要设置背景颜色则必须将.column盒子作为父容器在其里面添加一个子容器，在设置背景颜色，如果直接在.column容器中设置背景颜色会由于padding而无法产生盒子之间的间距。