双飞翼布局与假的等高

作者: 钱学敏 | 来源:发表于2018-04-24 23:38 被阅读0次

双飞翼布局与假的等高
几种常见的 CSS 布局
CSS 经典三列布局之双飞翼布局
布局方式——2018-02-06
特殊布局方法
圣杯布局和双飞翼布局
CSS高级技巧
双飞翼布局和圣杯布局-来源三人行慕课
实现两边定宽，中间自适应
css实现等高布局

这一经典布局用到的技术

position
float
负边距
等高
盒子模型
清除浮动

<!-- 双飞翼布局 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局与假等高</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .left{
            width:300px;
            background: #E79F6D;
            float:left;
            margin-left: -100%;
        }
        .right{
            width:200px;
            background: #77BBDD;
            float:left;
            margin-left: -200px;
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;
        }
        .main .mc {
            margin-left: 300px;
            /*去掉下面可做两列布局*/
            margin-right: 200px;
        }
        /*制作假等高*/
        .con{
            overflow: hidden;
        }
        .main,.left,.right{
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
    </style>

</head>
<body>
<header>实现了双飞翼布局与假的等高 中间部分始终显示最高的高度</header>
<!--双飞翼 start-->
<div class="con">
    <div class="main">
        <div class="mc">Main</div>
    </div>
    <div class="left">
        Left
        <p>第二行</p>
    </div>
    <div class="right">Right</div>
</div>
<!--双飞翼 end-->
<footer>我是底部</footer>
</body>
</html>