1. 使用bfc的原理實現
bfc的規則之一，就是bfc區域，不會與float box重疊，因此我們可以利用這一點來實現3列布局。
html**如下
xml/html code複製內容到剪貼簿
css**如下
css code複製內容到剪貼簿
2.雙飛翼布局
這種布局方案最早由**提出，主要為了主列能夠被最先載入。
實現原理：
（1）讓主列外面新增乙個wrap，主列wrap，以及2子列都左浮動。
（2）設定主列wrap寬度為100%，將子列的margin-left設定為負值，讓子列能夠排列在左右兩側。
（3）這是主列的margin-left與margin-right比左右兩列的寬度大一點，則可以設定出來主列與子列之間的間隙。
html**如下
xml/html code複製內容到剪貼簿
css**如下
css code複製內容到剪貼簿
3.聖杯布局
聖杯布局在結構上要簡單一點，也能夠讓主列優先載入。
實現原理：
（1）新增乙個包裹框，設定padding-leftpadding-right值，比子列寬度大乙個空隙的寬度。
（2）主列，子列都設定為float: left 左子列margin-left設定為-100%，並且設定為position:relative; left: -110px將左子列放置到左側。右子列同理。
（3）主列只需設定寬度為100%即可。包裹框的寬度不要設定為100%，自適應即可。
html**如下
xml/html code複製內容到剪貼簿
css**如下
css code複製內容到剪貼簿
下面再給出乙個高度佔滿全屏的例子：
css code複製內容到剪貼簿
本文標題: css實現頁面兩列布局與三列布局的方法示例
本文位址:
CSS實現網頁布局 一列，兩列，三列
1.一列布局 又叫單列布局 一列布局需要掌握3個知識點 標準文件流，其中又包含了塊級元素和行級元素，還有margin屬性，可以說實現一列布局的關鍵 就是由margin屬性實現的，通過設定margin 0 auto 來實現水平居中，auto就是它會根據瀏覽器的寬度自動設定兩邊的外邊距。要設定margi...
頁面布局 兩列布局
left right right css left right簡單的布局方法，左側設定浮動，右側設定margin left 避免環繞左側 的布局方法 left right right css left right fix right通過在html檔案的right上套上一層right fix，然後對r...
CSS 多列布局 三列布局
下面的 演示了3列布局的用法。html head title 三列布局 styletype text css body column1of3,column2of3,column3of3 body h1style color 706fd3 軟體開發，成就夢想 h2 ahref 學程式設計，上利永貞網 ...