2.1 簡(jiǎn)介

大家在進(jìn)行頁(yè)面布局的時(shí)候，可能會(huì)遇見(jiàn)兩欄式布局與三欄式布局，如下圖所示：

• 兩欄式

例子：

• 三欄式
  

2.2 方法

2.2.1 兩欄式

.left-pane{width: 14%;height: 1000px;float: left; } .right-pane{width: 86%;height: 1000px;overflow: hidden; }

提示： 本例中，我們將左邊div進(jìn)行左浮動(dòng)，將右邊的div變成BFC容器，并通過(guò)設(shè)置width百分比，實(shí)現(xiàn)鋪滿整個(gè)屏幕。這里的高度百分之百

2.2.2 三欄式

<div class="left" ></div> <div class="right"></div> <div class="center"></div> .left{height: 400px;width: 20%;float: left;background-color: red; } .center{overflow: hidden;height: 400px;width: 60%;background-color: blue; } .right{height: 400px;width: 20%;float: right;background-color: black; }

提示： 值得一提的是，三欄式布局在html結(jié)構(gòu)上，需要先寫(xiě)左右兩邊的div，然后再寫(xiě)中間的div。

---

這是一個(gè)不痛不癢的問(wèn)題，對(duì)于大多數(shù)人而言，并沒(méi)有什么技術(shù)含量，并且實(shí)現(xiàn)方法應(yīng)該不止這一種。但是，希望此文能對(duì)少部分人員，給予微不足道的幫助。留有此文，解今日之惑，便他日之需。

總結(jié)

以上是生活随笔為你收集整理的HCJ2：页面两栏式或三栏式布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。