一行三列宽度自适合的CSS代码_层和布局特效

CSS一行三列，采用相对宽度，自适应浏览器大小，你可以在查看效果时双击IE标题栏让窗口变小查看效果，每一行的宽度你会看到随之变校

<!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>你可以双击标题栏让窗口变小看效果。<em>20%</em></b></div>
</div>
<div id="mrccolumn">
<div class="innertube"><b>这里可以显示内容: <em>62%</em></b></div>
</div>
<div id="footer"><a href="/">Dynamic Drive CSS Library</a></div>
</div>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-12-09

[收藏][报错][返回列表]

一行三列宽度自适合的CSS代码_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些