HTML&CSS|CSS应用之实现三列布局(左右固定宽度,中间自适应)

实现一个三列布局的左右宽度固定,中间自适应。可以使用传统的css布局,也可以使用css3的新特性flex布局实现。
补充圣杯布局和双飞翼布局。
1.使用自身浮动法:
自身浮动法的原理就是对左右分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。
该布局法的不足是三个元素的顺序,middle一定要放在最后,middle占据文档流位置,所以一定要放在最后,左右两个元素位置没有关系。当浏览器窗口很小的时候,右边元素会被挤到下一行。
HTML&CSS|CSS应用之实现三列布局(左右固定宽度,中间自适应)
文章图片

2.使用绝对定位法:
绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的middle会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。
该法布局的好处,三个div顺序可以任意改变。但是因为是绝对定位,如果页面上还有其他内容,top的值需要小心处理。
HTML&CSS|CSS应用之实现三列布局(左右固定宽度,中间自适应)
文章图片

3.使用flex布局:
设置一个父div,添加样式display:flex。中间div设置flex-grow:1,(等同代码中设置flex:1。flex是grow、shrink、basis的简写)但是盒模型默认紧紧挨着,可以使用margin控制外边距。middle一定在中间,否则需要order属性来调整。
通过项目属性flex-grow设置middle的放大比例,将空余的空间用middle来填充,使三个项目排满一整行;默认为0,也就是对剩余空间不做处理。通过项目属性flex-basis 设置left和right的固定宽度。
HTML&CSS|CSS应用之实现三列布局(左右固定宽度,中间自适应)
文章图片

效果如下:
HTML&CSS|CSS应用之实现三列布局(左右固定宽度,中间自适应)
文章图片

4.补充一个圣杯布局,实现上述要求:
圣杯布局的原理是margin负值法。首先设置父div的位置,使其左右分别空出200px和120px区域。然后利用三列全部左浮动和相对定位以及设置left和right 负的外边距可以实现。代码如下,效果同上。
HTML&CSS|CSS应用之实现三列布局(左右固定宽度,中间自适应)
文章图片

5.补充一个双飞翼布局,有点类似于圣杯布局:
HTML&CSS|CSS应用之实现三列布局(左右固定宽度,中间自适应)
文章图片

【HTML&CSS|CSS应用之实现三列布局(左右固定宽度,中间自适应)】

    推荐阅读