html三列布局中间固定,常见的三列布局（左右固定宽度，中间自适应）

最新推荐文章于 2022-02-02 19:53:23 发布

weixin_39915605

最新推荐文章于 2022-02-02 19:53:23 发布

阅读量633

点赞数

文章标签： html三列布局中间固定

本文介绍了如何使用CSS实现三列布局，其中左右两列宽度固定，中间列宽度自适应。文章详细讲解了浮动法、绝对定位法、flex布局、圣杯布局、双飞翼布局以及calc()方法的实现策略，提供了多种解决方案。

摘要由CSDN通过智能技术生成

实现css中的三列布局，左右固定宽度，中间自适应。三列布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变。比较常见的实现方案是：定位，浮动，css3中新特性flex布局，以及流行的圣杯布局，双飞翼布局。

1、自身浮动法

思路：对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间盒子是正常文档流。在html结构中，中间的盒子一定要放置在左右盒子的后面。这样中间的盒子会自动移动到左右盒子下面，并且使用margin指定左右外边距进行定位，以便留出左右盒子的宽度，从而使中间元素自适应屏幕宽度。具体实现如下：

Document

.container{

height: 100%;

}

.left,

.right{

width: 200px;

height: 200px;

background-color: pink;

}

.left{

float: left;