|
流動(dòng)布局
了解定寬布局之后，我嘗試把這個(gè)方法用到動(dòng)態(tài)布局中去。邊欄仍然需要設(shè)置固定寬，很多瀏覽器不支持border:**%的屬性。但是我門可以使中間欄目自適應(yīng)。
CSS:
#container{
background-color:#0ff;
overflow:hidden;
margin:0 100px;
padding-right:150px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-right:150px solid #f00;
margin-right:-150px;
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
margin-right:-150px;
}
3個(gè)欄目自適應(yīng)布局
方法簡單，不需要引用圖片，沒有BUG.
HTML:
<div id="container">
<div id="center">Center Column Content</div>
<div id="leftRail">Left<br /> Sidebar</div>
<div id="rightRail">Right Sidebar</div>
</div>
CSS:
body{
margin:0 100px;
padding:0 200px 0 150px;
}
#container{
background-color:#0ff;
float:left;
width:100%;
border-left:150px solid #0f0;
border-right:200px solid #f00;
margin-left:-150px;
margin-right:-200px;
display:inline; /* So IE plays nice */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:100%;
margin-right:-100%;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
效果:
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
經(jīng)典論壇討論:
http://bbs.blueidea.com/thread-2730321-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2007/4554.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 垂直三欄布局擁有相同高度的方法 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 垂直三欄布局擁有相同高度的方法 [2]
