網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>層和布局特效代碼>

一行三列寬度自適合的CSS代碼_層和布局特效

CSS一行三列，采用相對寬度，自適應(yīng)瀏覽器大小，你可以在查看效果時雙擊IE標(biāo)題欄讓窗口變小查看效果，每一行的寬度你會看到隨之變校

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=GB2312" />
<title>一行三列_mb5u.com</title>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #EAEAEA;
height: 90px; 
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#columnwrapper{
float: left;
width: 100%;
}

#rightcolumn{
margin: 0 62% 0 20%; background: lightgreen;
}

#leftcolumn{
float: left;
width: 20%; 
margin-left: -100%;
background: skyblue;
}

#mrccolumn{
float: left;
width: 62%;
margin-left: -62%; 
background: #EEE;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF00;
}

.innertube{
margin: 10px; 
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">
<div id="columnwrapper">
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>Fluid (18%)</em></b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>你可以雙擊標(biāo)題欄讓窗口變小看效果。<em>20%</em></b></div>
</div>
<div id="mrccolumn">
<div class="innertube"><b>這里可以顯示內(nèi)容: <em>62%</em></b></div>
</div>
<div id="footer"><a href="/">Dynamic Drive CSS Library</a></div>
</div>
</body>
</html>

所屬頻道：層和布局特效/更新時間：2012-12-09

[收藏][報錯][返回列表]

相關(guān)層和布局特效：

一行三列寬度自適合的CSS代碼_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些