三欄布局就是頁面布局主要分為左中右三個部分，普遍為左、右固定中間自適應的形式。
1.定位法三欄布局：
css**：
html , body
#right ,#left
#left
#right
#main
id="left">div>
id="main">div>
id="right">div>
定位法主要主要在right和left兩個部分設定定位position:absolute;，將它們定位在瀏覽器的最左端和最右端，又由於absolute屬性會使元素脫離文字流，浮動在頁面上方，除了遮蓋了頁面下方的內容就不影響其他元素，所以就會產生如圖的效果（左右拉伸可以看到它的變化）：
但是如果中間一塊有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。
2.浮動法三欄布局
css**：
html , body
#right,#left
#right
#left
#main
id="left">div>
id="right">div>
id="main"> div>/*注意main寫在最後面*/
浮動法相對來說是最好理解的，給right,left兩塊定一定的寬度分別讓它們左、右浮動就好，最後注意的是main塊寫在它們兩之後（因為left和right是浮動的不佔文件位置，所以浮動在頁面兩側，所以main塊自覺的貼瀏覽器頂佔位）。但是當瀏覽器小到一定地步的時候（比如容不下right部分的時候），right部分就會被擠下去，因為right部分定了寬度，容不下自然要找地放自己。效果圖如下：
3.margin負值法三欄布局
css**：
#main
#maincontent
#left
#right
#left
.inner,#right
.inner
id="main">
id="maincontent">div>
div>
id="left">
class="inner">div>
div>
id="right">
class="inner">div>
div>
margin負值法可以這樣理解，由於main,left和right都設定了左浮動，按照位置（假設沒有設定margin）本應該是如下的布局：
可以看到由於三個塊都是左浮動，第一欄位置被main已經佔滿了，所以left和right只能在後面緊靠main，所以我們想辦法給left和right設定margin-left，讓它們可以都在main的上方分別左右靠著。於是可以發現給left設定margin-left為main的寬度的負值（這裡就是-100%，因為main，left,right父元素一致，而main的width本就是100%）,那這樣的話，left就到了main的靠左方了，那我們再來看看此時的right，
可以看到只要right向左再移動自己的長度就可以到達我們想要的效果，所以給right設定margin-left為right的寬度（width）。最後的效果如下：
三欄布局與兩欄布局
html 左邊定寬div 右邊自適應,前端前端前端前端前端前端前端前端前端前端div 1.left right 2.left right 3.left right 1.聖杯布局 class container class middle 中間div class left 左側div class rig...
二欄布局以及三欄布局
1 利用 calc 計算寬度的方法。left right 左側定寬 右側自適應 2 利用 float 配合 margin 實現。left right 左側定寬 右側自適應 3 利用 float 配合 overflow 實現。left right 左側定寬 右側自適應 4 利用flex實現。conta...
兩欄布局和三欄布局
這篇文章中主要將自己學到的兩欄布局和三欄布局的方法總結一下 兩欄布局，左側固定，右側自適應 結構 css樣式 left right如果是右側固定，左側自適應呢？html css right left注意 1 哪側固定哪個div就寫在上邊，不能顛倒順序 2 除了用float浮動外，還可以用定位的方式，...