div+css3栏自适应宽度布局实例-HTML教程-爱易网页

div+css3栏自适应宽度布局实例

日期：2014-05-17　浏览次数：20814 次

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;
}

引用自