其實三欄布局比較簡單，而且方法也有很多。今天了解了一下傳統的三欄布局方法：圣杯布局、雙飛翼布局，本文簡單記錄一下。

所謂三欄布局，通常是指左右兩欄定寬，中間一欄自適應頁面寬度填滿剩余空間的布局。

一、圣杯布局

<

這里有一點細節：主要內容部分，即中間欄dom放在了左右兩欄dom之前，在dom樹渲染的時候會被優先渲染。

div

圣杯布局的原理是：
container設置了padding之后浮動子元素的寬度計算100%是相對于container的寬度- paddingLeft - paddingRight，同時利用relative定位將左右兩欄調整到合適位置。

效果圖:

圣杯布局

二、雙飛翼布局

dom結構與圣杯布局類似：

1、html代碼

<

2、css代碼

div

原理與圣杯布局略微不同之處在于，圣杯布局利用container設置padding的方法限制中間欄寬度，而雙飛翼布局則在中間欄新加了一層dom，通過設置該dom的margin屬性并利用塊狀元素水平方向的流動性自適應中間剩余寬度。

效果圖：

三、總結

本文僅僅是對經典布局的一個簡單記錄，其實實現三欄布局還有很多其它的方法，比如flex布局、利用calc函數等，實現起來非常簡單。

作者：MuMa

總結

以上是生活随笔為你收集整理的div 布局_CSS布局：三栏布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。