纯CSS使用Float实现HTML双飞翼布局

需求：实现一个三列布局

• 左中右布局
• 左右2遍固定
• 中间内容区域宽度自适应

双飞燕布局

步骤

1. 使用float属性让三列向左浮动
2. 使用负margin属性让左右两列与中间列处于同一水平线上
3. 在中间中增加一个div内容元素，设置margin的值为左右两列的宽度
4. 最后，别忘记清楚浮动，让父元素正常显示

代码

css

.container {
	width: 800px;
    margin: 0 auto;
    border: 1px solid red;
    overflow: hidden;
}
.center {
    float: left;
    background: pink;
    width: 100%;
}
.content {
    margin: 0px 200px;
}
.left {
    float: left;
    background: yellow;
    width: 200px;
    margin-left: -100%;
} 
.right {
    float: left;
    background: green;
    width: 200px;
    margin-left: -200px;
} 

html

<div class="container">
   <div class="center"><div class="content">center</div></div>
   <div class="left">left</div>
   <div class="right">right</div>
</div>

华为云学习记录，欢迎学习交流分享知识，共同进步。