div+css三栏自适应宽度布局实例
1.原理
三栏分为left,center,right,其中left,right用固定宽度分别float:left,right
然后，加在中间，设置center的padding为相应左右left,right的宽度。
2.代码：
html代码
<body>
<div id="header">
<h1>蜗爱css--www.woaicss.com</h1>
</div>
<div id="left">
#left----woaicss.com
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
#Middle---woaicss.com
</div>
<div id="footer">
#Footer---woaicss.com
</div>
</body>
css定义
body {
margin: 0px;
padding: 0px;
}
#header {
clear: both;
height: 50px;
background-color: blue;
margin:0px 5px 5px 5px;
padding: 1px;
color:white;
}
#left {
float: left;
width: 150px;
background-color: red;
margin:0px 5px;
}
#right {
float: right;
width: 150px;
background-color: green;
margin:0px 5px;
}
#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
height:300px;
margin:0px 5px;
}
#footer {
clear: both;
background-color: yellow;
margin:5px 5px 0px 5px;
}
1497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
