首页 > 代码库 > 双飞翼布局

双飞翼布局

2024-09-12 02:44:10   214人阅读

CSS文件：
body{
    margin:0;
    padding:0;
}
.header {
    background:orange;
    height:100px;
}
.footer{
    background: greenyellow;
    height:300px;
}
.article{
    background:beige;
    overflow: hidden;
}

.article .middle{
    float:left;
    background: #dbae58;
    width:100%;
    margin-bottom:-9999px;
    padding-bottom:9999px;

}
.article .right{
    background: #213aff;
    float: left;
    width:100px;
    margin-left: -100px;
    margin-bottom:-9999px;
    padding-bottom:9999px;

}
.article .left{
    background: green;
    float:left;
    width:150px;
    margin-left: -100%;
    margin-bottom:-9999px;
    padding-bottom:9999px;
}
.article .inner{
    background: #50cd35;
    margin-left:150px;
    margin-right:100px;
    margin-bottom:-9999px;
    padding-bottom:9999px;
}

主要是通过给padding-bottom一个较大的正值，margin-bottom一个大小一样的负值，外层容器overflow：hidden；实现登高布局，保证容器内高度大小跟随内容变化



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://www.mamicode.com/src/css/test.css" rel="stylesheet">
</head>
<body>
<div class="header">
    header
</div>
<div class="article">
    <div class="middle">
        <div class="inner">
             middle
            <br/>
            middle
        <br/>
        </div>
    </div>
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
<div class="footer">
    tail
</div>
</body>
</html>

双飞翼布局


联系
我们