双飞翼布局

双飞翼布局

核心思想：浮动 + 外边距负值

双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。

HTML结构

<div class="container">
    <div class="middle">
        <div class="inner">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
复制代码

CSS样式

.container {
    height: 100px;
    overflow: hidden;
}
.middle,
.left,
.right {
    float: left;
    height: 100%;
}
.middle {
    width: 100%;
    background-color: green;
}
.inner {
    height: 100%;
    margin: 0 200px 0 200px;
}
.left {
    width: 200px;
    margin-left: -100%;
    background-color: red;
}
.right {
    width: 200px;
    margin-left: -200px;
    background-color: blue;
}