資訊專欄INFORMATION COLUMN
摘要：在這里介紹基于的幾種布局浮動與兩側(cè)自適應(yīng)的布局如圖所示，左邊沒有限定寬度，右邊寬度自適應(yīng)。使用實現(xiàn)的布局，可以適用于兩欄的布局。單側(cè)固定的布局單側(cè)固定的布局分為固定布局和流體布局。
在這里介紹基于float的幾種布局.
1.浮動與兩側(cè)自適應(yīng)的布局如圖所示，左邊沒有限定寬度，右邊寬度自適應(yīng)。使用table-cell實現(xiàn)的布局，可以適用于兩欄的布局。
HTML代碼
與浮動與兩側(cè)自適應(yīng)的布局
與浮動與兩側(cè)自適應(yīng)的布局與浮動與兩側(cè)自適應(yīng)的布局與浮動與兩側(cè)自適應(yīng)的布局與浮動與兩側(cè)自適應(yīng)的布局與浮動與兩側(cè)自適應(yīng)的布局與浮動與兩側(cè)自適應(yīng)的布局與浮動與兩側(cè)自適應(yīng)的布局
對應(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è)置足夠長的寬度，使其定位正常*/
*width: auto;/*兼容IE6、7*/
background:green;
}
需要說明一點是：display: table-cell后，是根據(jù)內(nèi)容來決定其實際的寬度。
table-cell在IE6、7中是不支持的，可以使用*width:auto進(jìn)行兼容性處理,不過現(xiàn)在這兩個版本IE的市場占有率很低，適當(dāng)?shù)臅r候可以刪去。
分別有兩種方式，一種不改變DOM樹結(jié)構(gòu)顯示順序，一種則會使DOM樹結(jié)構(gòu)順序與顯示的界面相異。
HTML代碼
浮動與右側(cè)尺寸固定的流體布局
與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局
對應(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)鍵點在于，HTML代碼中，把在右邊顯示的DIV放到左邊顯示的前面，然后通過float: right浮動到右邊，可通過調(diào)整left盒子的margin-right來調(diào)整兩個盒子之間的間距。
這種方式會破壞頁面優(yōu)先渲染順序，它會先渲染右邊的盒子，再渲染左邊的盒子，視頁面區(qū)域內(nèi)容重要程度而定。
HTML代碼
浮動與右側(cè)尺寸固定的流體布局
與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局
對應(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;/*這個數(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.
給定一個足夠大的負(fù)邊距，可以使受影響的相鄰元素發(fā)生重合。
3.單側(cè)固定的布局單側(cè)固定的布局分為固定布局和流體布局。
通用的HTML
浮動與右側(cè)尺寸固定的流體布局
與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局與右側(cè)尺寸固定的浮動布局
固定布局
對應(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;實現(xiàn)。
流體布局對應(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;
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111386.html
摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...
摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...
摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...
摘要：本文概要本文將介紹如下幾種常見的布局其中實現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯亂問題，實現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...
閱讀 25706·2021-09-29 09:41
閱讀 4851·2021-09-10 11:20
閱讀 1958·2021-09-09 09:32
閱讀 1912·2019-08-30 15:44
閱讀 3224·2019-08-29 17:13
閱讀 2835·2019-08-29 14:14
閱讀 2091·2019-08-29 14:11
閱讀 3252·2019-08-29 12:36
