基于float的几种布局
在這里介紹基于float的幾種布局.
1.浮動(dòng)與兩側(cè)自適應(yīng)的布局
如圖所示，左邊沒有限定寬度，右邊寬度自適應(yīng)。使用table-cell實(shí)現(xiàn)的布局，可以適用于兩欄的布局。
HTML代碼
對(duì)應(yīng)的CSS代碼
*{padding:0;margin:0;}.container{max-width:960px;margin:0 auto;}.left{float:left;margin-right:20px;}.right{height:220px;display: table-cell; /*像表格單元格一樣顯示*/width: 3000px;/*由于是根據(jù)內(nèi)容而決定寬度，當(dāng)內(nèi)容不是很多的時(shí)候， 寬度沒有被撐開，此時(shí)一些相對(duì)于這個(gè)元素定位的元素就會(huì)錯(cuò)位，故設(shè)置足夠長的寬度，使其定位正常*/*width: auto;/*兼容IE6、7*/background:green;}需要說明一點(diǎn)是：display: table-cell后，是根據(jù)內(nèi)容來決定其實(shí)際的寬度。
table-cell在IE6、7中是不支持的，可以使用*width:auto進(jìn)行兼容性處理,不過現(xiàn)在這兩個(gè)版本IE的市場(chǎng)占有率很低，適當(dāng)?shù)臅r(shí)候可以刪去。
2.右側(cè)尺寸固定的浮動(dòng)布局
分別有兩種方式，一種不改變DOM樹結(jié)構(gòu)顯示順序，一種則會(huì)使DOM樹結(jié)構(gòu)順序與顯示的界面相異。
改變DOM樹先后順序的方法
HTML代碼
<!DOCTYPE html> <html lang="ch"> <head><meta charset="UTF-8"><title>浮動(dòng)與右側(cè)尺寸固定的流體布局</title> </head> <body> <div class="container"><div class="right"></div><div class="left">與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局</div> </div> </body> </html>對(duì)應(yīng)的CSS代碼
*{padding:0;margin:0;}.container{max-width:960px;margin:0 auto;overflow:hidden;}.left{margin-right:200px;background:red;}.right{width:200px;height:100px;float: right;background:green;}關(guān)鍵點(diǎn)在于，HTML代碼中，把在右邊顯示的DIV放到左邊顯示的前面，然后通過float: right浮動(dòng)到右邊，可通過調(diào)整left盒子的margin-right來調(diào)整兩個(gè)盒子之間的間距。
這種方式會(huì)破壞頁面優(yōu)先渲染順序，它會(huì)先渲染右邊的盒子，再渲染左邊的盒子，視頁面區(qū)域內(nèi)容重要程度而定。
不改變DOM樹先后順序的方法
HTML代碼
<!DOCTYPE html> <html lang="ch"> <head><meta charset="UTF-8"><title>浮動(dòng)與右側(cè)尺寸固定的流體布局</title> </head> <body> <div class="container"><div class="left"> <p class="left-content"> 與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局 </p> </div><div class="right"></div> </div> </body> </html>對(duì)應(yīng)的CSS代碼
*{padding:0;margin:0;}.container{max-width:960px;margin:0 auto;overflow:hidden;}.left{width:100%;float:left;background:red;}.right{width:200px;height:100px;float: left;margin-left:-200px;/*這個(gè)數(shù)值的大小是跟其寬度值相同的*/background:green;} .left-content{margin-right:220px; //文字不被覆蓋}關(guān)于negative margin（負(fù)邊距），w3c提到:
Given a large enough negative margin applied to a large enough element, the affected adjacent element can even be overlapped.給定一個(gè)足夠大的負(fù)邊距，可以使受影響的相鄰元素發(fā)生重合。
3.單側(cè)固定的布局
單側(cè)固定的布局分為固定布局和流體布局。
通用的HTML
固定布局
對(duì)應(yīng)的CSS代碼
*{padding:0;margin:0;}.container{max-width:960px;margin:0 auto;overflow:hidden;}.left{width:100px;height:100px;float:left;background:red;}.right{width:100px;height:100px;float: right;background:green;}通過float:left; float:right;實(shí)現(xiàn)。
流體布局
對(duì)應(yīng)的CSS代碼
*{padding:0;margin:0;}.container{max-width:960px;margin:0 auto;overflow:hidden;}.left{width:100px;height:100px;float:left;margin-right:20px;background:red;}.right{background:green;}總結(jié)
以上是生活随笔為你收集整理的基于float的几种布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 只显示隐藏文件 显示指定目录下的目录
- 下一篇： java-基础-ArrayList剖析