双飞翼布局

双飞翼布局中，在main内部的main-inner div设置margin是给双翼留有空间，main的content宽度仍旧是100%，双翼是不是会覆盖部分main的content？由于都处于float，双翼可以覆盖到main上？

慕无忌0480347 2018-07-22

源自：CSS网页布局基础 3-4 双飞翼布局及案例

收起

1回答

樱桃小胖子 2018-07-23 10:42:12

双飞翼布局的实现原理：

（1）html代码中，main中间部分要放最前边，然后是左翼、右翼

（2）将main中间部分、左翼、右翼都float:left

（3）将main中间部分宽度设置成width:100%

（4）此时main占满全屏，所以要把左翼拉到最左边，使用margin-left:-100% 同理右翼使用margin-left:-220px（右翼的宽度）

（5）到这一步骤，会发现main内容被覆盖了，解决办法有两种

①除了使用外围的padding

②也可以使用margin

具体实现方法是：给main增加一个内层<div class="main-inner">main</div>, 然后margin:0 右翼宽度px 0 左翼宽度px

示例

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
 
    body {
        min-width: 700px;
    }
 
    .header,
    .footer {
        border: 1px solid #333;
        background: #aaa;
        text-align: center;
    }
 
    .left,
    .main,
    .right {
        float: left;
        min-height: 130px;
    }
 
    .left {
        margin-left: -100%;
        width: 200px;
        background: red;
    }
 
    .right {
        margin-left: -220px;
        width: 220px;
        background: blue;
    }
 
    .main {
        width: 100%;
    }
 
    .main-inner {
        margin-left: 200px;
        margin-right: 220px;
        min-height: 130px;
        background: green;
        word-break: break-all;
    }
 
    .footer {
        clear: both;
    }
    </style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="main">
        <div class="main-inner">
            <p>慕课网main</p>
        </div>
    </div>
    <div class="left">
        <p>慕课网left</p>
    </div>
    <div class="right">
        <p>right</p>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>
 
</html>