當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

如何实现三栏布局

發布時間：2025/7/25 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了如何实现三栏布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

雙飛翼布局
來源于淘寶UED的玉伯，致敬~
圣杯布局【Holy Grail of Layouts】
Kevin Cornell在2006年提出的一個布局模型概念，在國內最早是由淘寶UED的工程師傳播開來

margin-left:-100%;
使對象向左移動一段距離，這段距離等于父體的內容寬度，上浮到前面元素的最左邊

1.浮動,設置main的寬度為100%;
main中間欄(重要的東西)要在放在文檔流前面以優先渲染

效果：

2.讓left和right與main在一行，需要使用margin-left的負值，此時left和right覆蓋了main的一部分，但是width的寬度不發生改變

.left{margin-left: -100%;}.right{margin-left: -200px;}

3.main部分的內容被覆蓋住了，要如何解決呢？
3.1雙飛翼布局

.content{margin-left: 200px;margin-right: 200px;} <div class="wrap"><div class="main"><div class="content">main</div></div>

給main內嵌一個div，把main里面的內容放在這個div中，并給這個div設置margin屬性就ok啦~
3.2圣杯布局

.wrap{padding-left: 200px;padding-right: 200px;}

效果：

給最外圍的wrap容器設置padding值之后，其包含的div寬度被壓縮，但是main被定位到了合適的位置，如下圖，在瀏覽器中把left，right元素隱藏之后

.left,.right{background: #F65;width: 200px;position: relative;}.left{margin-left: -100%;left:-200px;}.right{margin-left: -200px;right:-200px;}

把main定位到了合適的位置，下一步就要解決left，right的位置問題了~
設置left，right為相對定位，其實相對定位和絕對定位都ok~然后把left和right拉到合適的位置，大功告成！是不是很開心~
最終效果：

總結：
圣杯布局：沒有增加額外的標記，但是設置了較多的屬性值~
雙飛翼布局：增加了一個div，但是顯得更加輕便簡潔靈活，代碼也比較少~
兩者都用到了margin的負值，這個屬性還是蠻靈活的，要多用
作為小白，很佩服能夠靈活布局的大大，所以我還要學習學習在學習，理解理解再理解！

轉載于:https://www.cnblogs.com/godot-blog/p/6511795.html

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

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