CSS双飞翼布局是一种用CSS实现的三列布局方式,其中左右两栏固定宽度,中间的栏宽度自适应,能够很好地适应不同屏幕尺寸。双飞翼布局的实现涉及到CSS的盒模型、浮动、绝对定位等知识点。下面我们就来一起学习一下如何实现CSS双飞翼模型。
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.left {
width: 200px;
float: left;
}
.right {
width: 200px;
float: right;
}
.content {
margin: 0 220px; /* 左右两栏宽度200px + 20px间距 */
height: 100%;
background-color: #fff;
}
.inner {
padding: 20px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
在上面的代码中,我们使用了一个容器元素`.container`来包裹整个布局。左右两栏使用`float`属性进行浮动,中间的栏使用`margin`属性设置宽度,使用`padding`属性设置内部内容。
还需要注意的是,我们在容器元素中使用了`position:relative`属性,同时还添加了一个清除浮动的伪元素`.clearfix:after`来防止浮动元素溢出。