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

多列等分布局

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

HTML代码

div <span class="hljs-type" style="margin: 0px; padding: 0px; box-sizing: border-box;">class</span>=<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(0, 136, 0); box-sizing: border-box;">"parent"</span>> div <span class="hljs-type" style="margin: 0px; padding: 0px; box-sizing: border-box;">class</span>=<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(0, 136, 0); box-sizing: border-box;">"column"</span>><span class="hljs-number" style="margin: 0px; padding: 0px; color: rgb(0, 102, 102); box-sizing: border-box;">1</span><span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 136); box-sizing: border-box;">div</span>> div <span class="hljs-type" style="margin: 0px; padding: 0px; box-sizing: border-box;">class</span>=<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(0, 136, 0); box-sizing: border-box;">"column"</span>><span class="hljs-number" style="margin: 0px; padding: 0px; color: rgb(0, 102, 102); box-sizing: border-box;">2</span><span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 136); box-sizing: border-box;">div</span>> div <span class="hljs-type" style="margin: 0px; padding: 0px; box-sizing: border-box;">class</span>=<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(0, 136, 0); box-sizing: border-box;">"column"</span>><span class="hljs-number" style="margin: 0px; padding: 0px; color: rgb(0, 102, 102); box-sizing: border-box;">3</span><span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 136); box-sizing: border-box;">div</span>> div <span class="hljs-type" style="margin: 0px; padding: 0px; box-sizing: border-box;">class</span>=<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(0, 136, 0); box-sizing: border-box;">"column"</span>><span class="hljs-number" style="margin: 0px; padding: 0px; color: rgb(0, 102, 102); box-sizing: border-box;">4</span><span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 136); box-sizing: border-box;">div</span>> <span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>

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

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

<span class="hljs-class" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(155, 112, 63);">.parent</span><span class="hljs-rules" style="margin: 0px; padding: 0px; box-sizing: border-box;">{<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">display</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> flex</span></span>;<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;">}</span></span> <span class="hljs-class" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(155, 112, 63);">.column</span><span class="hljs-rules" style="margin: 0px; padding: 0px; box-sizing: border-box;">{<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">flex</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="margin: 0px; padding: 0px; box-sizing: border-box;">1</span></span></span>;<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;">}</span></span> <span class="hljs-class" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(155, 112, 63);">.column</span>+ <span class="hljs-class" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(155, 112, 63);">.column</span><span class="hljs-rules" style="margin: 0px; padding: 0px; box-sizing: border-box;">{<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">margin-left</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="margin: 0px; padding: 0px; box-sizing: border-box;">20</span>px</span></span>;<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;">}</span></span>

• 1
• 2
• 3

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

<span class="hljs-class" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(155, 112, 63);">.parent</span><span class="hljs-rules" style="margin: 0px; padding: 0px; box-sizing: border-box;">{<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">display</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> table</span></span>; <span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">table-layout</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> fixed</span></span>; <span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">width</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="margin: 0px; padding: 0px; box-sizing: border-box;">100</span>%</span></span>;<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;">}</span></span> <span class="hljs-class" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(155, 112, 63);">.column</span><span class="hljs-rules" style="margin: 0px; padding: 0px; box-sizing: border-box;">{<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">display</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> table-cell</span></span>; <span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">padding-left</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="margin: 0px; padding: 0px; box-sizing: border-box;">20</span>px</span></span>;<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;">}</span></span>

• 1
• 2

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

<span class="hljs-class" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(155, 112, 63);">.column</span><span class="hljs-rules" style="margin: 0px; padding: 0px; box-sizing: border-box;">{<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">float</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> left</span></span>; <span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">width</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="margin: 0px; padding: 0px; box-sizing: border-box;">25</span>%</span></span>; <span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">padding-left</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="margin: 0px; padding: 0px; box-sizing: border-box;">20</span>px</span></span>; <span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;"><span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box;">box-sizing</span>:<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 102, 102);"> border-box</span></span>;<span class="hljs-rule" style="margin: 0px; padding: 0px; box-sizing: border-box;">}</span></span>

• 1

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