Rumah  >  Artikel  >  hujung hadapan web  >  HTML与CSS布局技巧(三)_html/css_WEB-ITnose

HTML与CSS布局技巧(三)_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-21 08:49:521056semak imbas

多列等分布局

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

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而无法产生盒子之间的间距。

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn