所謂三欄布局，通常是指左右兩欄定寬，中間一欄自適應頁面寬度填滿剩餘空間的布局。
<divcontainer設定了padding之後浮動子元素的寬度計算100%是相對於container的寬度- paddingleft - paddingright，同時利用relative定位將左右兩欄調整到合適位置。
效果圖:
聖杯布局
dom結構與聖杯布局類似：
1、html**
<div效果圖：
本文僅僅是對經典布局的乙個簡單記錄，其實實現三欄布局還有很多其它的方法，比如flex布局、利用calc函式等，實現起來非常簡單。
CSS布局 三欄布局
題外話 抓狂系列片之叄個我。三欄布局要求說明 兩邊固定寬度，中間自適應，頂部對齊 html文件結構有三種 內層div順序不同 左右中 左中右。實現效果 方法如下 1.左右中 對左右子元素使用了浮動屬性 float 從而脫離了文件流，如果按照正常左中右的順序，會導致右子元素出現在中間子元素的右下方。所...
CSS布局 三欄布局
css布局技術可謂是前端技術中最基礎的技術，就是因為基礎，所以我認為要更加熟練，深入的去掌握，去梳理。採用浮動實現的三欄布局有以下特點及注意事項 注意dom結構的排列順序。因為左右兩側的dom都是浮動布局，而中間的dom則是普通的文件流，所以為了規避瀏覽器正常的頁面渲染，即先解析左側dom 浮動 再...
CSS 三列布局（三欄布局）
傳統三列布局 左右定寬，中間自適應 1.絕對定位 外邊距實現 左右盒子絕對定位，固定於頁面左右兩側 中間盒子的 margin left,margin right 分別等於左右兩個盒子的寬度。css left middle right 2.浮動 外邊距實現 左右盒子浮動到頁面兩側，中間盒子的 marg...