主內(nèi)容欄自適應(yīng)寬度
資訊專欄INFORMATION COLUMN
摘要：圣杯布局很好很巧妙的布局方式，每次都要翻看一下，干脆轉(zhuǎn)過來轉(zhuǎn)自最終效果左側(cè)欄固定寬度，右側(cè)自適應(yīng)主內(nèi)容欄自適應(yīng)寬度側(cè)邊欄固定寬度右側(cè)欄固定寬度，左側(cè)自適應(yīng)主內(nèi)容欄自適應(yīng)寬度側(cè)邊欄固定寬度左中右三欄
圣杯布局--很好很巧妙的布局方式，每次都要翻看一下，干脆轉(zhuǎn)過來
轉(zhuǎn)自：http://my.oschina.net/jsan/blog/368543
最終效果： 左側(cè)欄固定寬度，右側(cè)自適應(yīng)html:
主內(nèi)容欄自適應(yīng)寬度
側(cè)邊欄固定寬度
css:
.bd-lft {
zoom:1;
overflow:hidden;
padding-left:210px;
}
.bd-lft .aside {
float:left;
width:200px;
margin-left:-100%; /*= -100%*/
position:relative;
left:-210px; /* = -parantNode.paddingLeft */
_left: 0; /*IE6 hack*/
}
.bd-lft .main {
float:left;
width:100%;
}
右側(cè)欄固定寬度，左側(cè)自適應(yīng)
html:
主內(nèi)容欄自適應(yīng)寬度
側(cè)邊欄固定寬度
css:
.bd-rgt {
zoom:1;
overflow:hidden;
padding-right:210px;
}
.bd-rgt .aside {
float:left;
width:200px;
margin-left:-200px; /* = -this.width */
position:relative;
right:-210px; /* = -parantNode.paddingRight */
}
.bd-rgt .main {
float:left;
width:100%;
}
左中右 三欄自適應(yīng)
html:
主內(nèi)容欄自適應(yīng)寬度
側(cè)邊欄1固定寬度
側(cè)邊欄2固定寬度
css:
.bd-3-lr {
zoom:1;
overflow:hidden;
padding-left:210px;
padding-right:210px;
}
.bd-3-lr .main {
float:left;
width:100%;
}
.bd-3-lr .aside-1 {
float: left;
width:200px;
margin-left: -100%;
position:relative;
left: -210px;
_left: 210px; /*IE6 hack*/
}
.bd-3-lr .aside-2 {
float: left;
width:200px;
margin-left: -200px;
position:relative;
right: -210px;
}
都在左邊，右側(cè)自適應(yīng)
html:
主內(nèi)容欄自適應(yīng)寬度
側(cè)邊欄1固定寬度
側(cè)邊欄2固定寬度
css:
.bd-3-ll {
zoom:1;
overflow:hidden;
padding-left:420px;
}
.bd-3-ll .main {
float:left;
width:100%;
}
.bd-3-ll .aside-1 {
float: left;
width:200px;
margin-left: -100%;
position:relative;
left: -420px;
_left: 0px; /*IE6 hack*/
}
.bd-3-ll .aside-2 {
float: left;
width:200px;
margin-left: -100%;
position:relative;
left: -210px;
_left: 210px; /*IE6 hack*/
}
都在右邊，左側(cè)自適應(yīng)
html:
主內(nèi)容欄自適應(yīng)寬度
側(cè)邊欄1固定寬度
側(cè)邊欄2固定寬度
css:
.bd-3-rr {
zoom:1;
overflow:hidden;
padding-right:420px;
}
.bd-3-rr .main {
float:left;
width:100%;
}
.bd-3-rr .aside-1 {
float: left;
width:200px;
margin-left: -200px;
position:relative;
right: -210px;
}
.bd-3-rr .aside-2 {
float: left;
width:200px;
margin-left: -200px;
position:relative;
right: -420px;
}
最終代碼：
圣杯布局
頭部
主內(nèi)容欄自適應(yīng)寬度
側(cè)邊欄固定寬度
主內(nèi)容欄自適應(yīng)寬度
側(cè)邊欄固定寬度
主內(nèi)容欄自適應(yīng)寬度
側(cè)邊欄1固定寬度
側(cè)邊欄2固定寬度
主內(nèi)容欄自適應(yīng)寬度
側(cè)邊欄1固定寬度
側(cè)邊欄2固定寬度
主內(nèi)容欄自適應(yīng)寬度
側(cè)邊欄1固定寬度
側(cè)邊欄2固定寬度
底部
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111111.html
摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：重點(diǎn)介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結(jié) 由于最近在準(zhǔn)備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細(xì)，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...
閱讀 2329·2023-04-26 00:28
閱讀 3077·2019-08-30 15:55
閱讀 2748·2019-08-30 12:47
閱讀 1559·2019-08-29 11:04
閱讀 3183·2019-08-28 18:14
閱讀 951·2019-08-28 18:11
閱讀 1678·2019-08-26 18:36
閱讀 3393·2019-08-23 18:21
