2.1 簡介

大家在進行頁面布局的時候，可能會遇見兩欄式布局與三欄式布局，如下圖所示：

• 兩欄式

例子：

• 三欄式
  

2.2 方法

2.2.1 兩欄式

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

提示： 本例中，我們將左邊div進行左浮動，將右邊的div變成BFC容器，并通過設置width百分比，實現鋪滿整個屏幕。這里的高度百分之百

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結構上，需要先寫左右兩邊的div，然后再寫中間的div。

---

這是一個不痛不癢的問題，對于大多數人而言，并沒有什么技術含量，并且實現方法應該不止這一種。但是，希望此文能對少部分人員，給予微不足道的幫助。留有此文，解今日之惑，便他日之需。

總結

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

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