HCJ2:页面两栏式或三栏式布局
生活随笔
收集整理的這篇文章主要介紹了
HCJ2:页面两栏式或三栏式布局
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
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)題。
- 上一篇: OpenLayers教程十一:多源数据加
- 下一篇: 上千家企业涌入蚂蚁开放联盟链:在区块链上