css三欄布局：左右固定寬中間自適應(yīng)

CoorChice 發(fā)布于2019-08-30 15:52 / 2500人閱讀

摘要：圣杯布局直接上代碼雙飛翼布局自身浮動(dòng)法絕對(duì)定位法

圣杯布局

直接上代碼：
html:

css:

.middle,.left,.right {float: left; position: relative;}
.middle {width: 100%;}
.left {margin-left: -100%; width: 220px; left: -220px;}
.right {margin-left: -220px; width: 220px;right: -220px;}
.container {padding: 0 220px 0 220px}

雙飛翼布局

html:

css:

.middle,.left,.right {float: left;}
.middle {width: 100%;}
.left {margin-left: -100%; width: 220px; }
.right {margin-left: -220px; width: 220px;}
.middle-inner {margin-left: 220px;margin-right: 220px;}

自身浮動(dòng)法

html:

css:

.left,.right,.middle {min-height: 200px}
.left {width: 220px; float: left;  border:1px solid red; } 
.right {width: 160px; float: right;  border:1px solid blue; } 
.middle {margin-left: 250px; margin-right: 180px;  border:1px solid green; }

絕對(duì)定位法

html:

css:

.left,.right{position: absolute;top: 0;width: 220px;min-height: 130px}
.left {left: 0;}
.right {right: 0;}
.middle {margin:0 220px 0 220px; min-height: 130px}

云服務(wù)器 GPU云服務(wù)器 css自適應(yīng) css圖片自適應(yīng) asp 自適應(yīng)css 三欄布局

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116419.html

相關(guān)文章

css三欄布局：左右固定寬中間自適應(yīng)

摘要：圣杯布局直接上代碼雙飛翼布局自身浮動(dòng)法絕對(duì)定位法圣杯布局直接上代碼：html: css: .middle,.left,.right {float: left;} .middle {width: 100%;} .left {margin-left: -100%; width: 220px; } .right {margin-left: -220px; wi...

Vicky 2019-08-01 16:14 評(píng)論0 收藏0
三欄布局（一）-------左右寬高固定，中間自適應(yīng)

摘要：幼圓常見的頁(yè)面布局有幼圓左右寬度固定，中間自適應(yīng)幼圓上下高度固定，中間自適應(yīng)幼圓左寬度固定，右自適應(yīng)幼圓上高度固定，下自適應(yīng)，幼圓下邊是我看過網(wǎng)上的視頻后寫出來的三欄布局左右寬高固定，中間自適應(yīng)幼圓有種布局方常見的頁(yè)面布局有 1、左右寬度固定，中間自適應(yīng)； 2、上下高度固定，中間自適應(yīng)； 3、左寬度固定，右自適應(yīng)； 4、上高度固定，下自適應(yīng)，下邊是我看過網(wǎng)上的視頻后寫出來的三欄布局-左右寬...

Aldous 2019-04-23 13:08 評(píng)論0 收藏0
CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到。可以通過設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。本文首發(fā)于知乎專欄：前端指南 CSS布局布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...

includecmath 2019-08-29 12:17 評(píng)論0 收藏0
【CSS】三欄/兩欄寬高自適應(yīng)布局大全

摘要：方案一方案二和方案的有點(diǎn)是兼容性好因?yàn)槎际潜容^老的解決方案了缺點(diǎn)是之后需要清除浮動(dòng)造成的影響定位的話就是絕對(duì)定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動(dòng)端主流的方案的語(yǔ)法缺點(diǎn)就是以下不支持。頁(yè)面布局注意方案多樣性、各自原理、各自優(yōu)缺點(diǎn)、如果不定高呢、兼容性如何三欄自適應(yīng)布局,左右兩側(cè)300px,中間寬度自適應(yīng) (1) 給出5種方案方案一: float (左右浮動(dòng),中間...

jindong 2019-08-01 18:28 評(píng)論0 收藏0
【CSS】三欄/兩欄寬高自適應(yīng)布局大全

摘要：方案一方案二和方案的有點(diǎn)是兼容性好因?yàn)槎际潜容^老的解決方案了缺點(diǎn)是之后需要清除浮動(dòng)造成的影響定位的話就是絕對(duì)定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動(dòng)端主流的方案的語(yǔ)法缺點(diǎn)就是以下不支持。頁(yè)面布局注意方案多樣性、各自原理、各自優(yōu)缺點(diǎn)、如果不定高呢、兼容性如何三欄自適應(yīng)布局,左右兩側(cè)300px,中間寬度自適應(yīng) (1) 給出5種方案方案一: float (左右浮動(dòng),中間...

isaced 2019-08-29 14:21 評(píng)論0 收藏0