兩邊用絕對定位，中間用margin，左右寬度固定，中間寬度不固定，中間主體放在左欄右欄後面（中間欄會佔據整行）
charset="utf-8">
title>
.left
.center
.right
style>
head>
class="left">
div>
class="right">
div>
class="center">
div>
body>
html>
charset="utf-8">
title>
.left
.center
.right
style>
head>
class="left">
div>
class="right">
div>
class="center">
div>
body>
html>
charset="utf-8">
title>
.left
.right
.right1
.right2
style>
head>
class="left">
div>
class="right">
class="right1">
div>
class="right2">
div>
div>
body>
html>
三欄布局的幾種方式
這裡介紹幾種三欄布局的實現方式，最終目的都是左右兩邊固定寬度，中間的自適應。最終效果如下 一 流式布局 en class wrap class left class right class main 優點 這是比較正常的思路，兩邊浮動，中間利用margin。缺點 主題部分不能優先載入，體驗不好。2 ...
幾種布局方式
1.固定布局 方法裡把加好，然後根據設計稿設定相應的寬度即可，其他地方類似於pc端。優點 思路沿用pc端，上手比較快 缺點 大屏手機顯示網頁比較寬，而固定布局寬度參照永遠是固定的寬度 設計稿的大小 導致左右兩邊會有空白。手機橫屏的時候兩邊空白更亮。2.流動布局 方法適用百分比 做單位。優點 能更很好...
三欄布局（三列布局）
此 較簡單，左欄左浮動，右欄右浮動，主欄內容放在最後，用margin 值為左右的寬度來實現自適應 注意 不浮動的元素要放在浮動元素後面 如下 此方法與自身浮動法相似，但是使用的是絕對定位，左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主題欄採用左右的margin值來撐開距離 注意 採用浮動的...