本文共 2073 字，大约阅读时间需要 6 分钟。

左右固定中间自适应布局

在网页设计中，常常需要实现左右固定，中间自适应的布局效果。这种布局方式的关键在于如何处理左右侧的浮动元素，以及如何让中间区域根据需求自适应显示内容。以下是实现这一布局的几种常用方法，以及它们的工作原理。

1. Flex布局实现

Flexbox布局是实现这种布局的首选工具。在Flex布局中，可以通过将父盒子设置为display: flex，然后让右侧的盒子占用剩余空间。以下是具体实现代码：

.father {
    height: 500px;
    background-color: pink;
    display: flex;
}
.left {
    height: 400px;
    width: 200px;
    background-color: orange;
}
.right {
    flex: 1;
    height: 450px;
    background-color: skyblue;
}

工作原理：

• 父盒子使用display: flex，默认情况下子盒子排列成行。
• 右侧盒子设置flex: 1，表示它会占据剩余的空间。
• 左侧盒子固定宽度，右侧盒子自动扩展以适应父盒子的高度。

2. 定位实现

也可以通过定位来实现左右固定，中间自适应的布局效果。这种方法通常需要父盒子设置position: relative，然后左侧盒子绝对定位，右侧盒子则根据需求填充剩余空间。以下是实现代码：

.father {
    height: 500px;
    background-color: pink;
    position: relative;
    padding-left: 200px;
}
.left {
    height: 400px;
    width: 200px;
    background-color: orange;
    position: absolute;
    left: 0;
    top: 0;
}
.right {
    height: 450px;
    background-color: skyblue;
}

工作原理：

• 父盒子设置position: relative，为左侧盒子提供相对定位的基础。
• 左侧盒子使用position: absolute，并设置left: 0，使其固定在父盒子的左侧。
• 右侧盒子根据父盒子的padding-left自动填充剩余空间，实现自适应布局。

3. Block Formatting Context（BFC）实现

Block Formatting Context（BFC）可以通过设置盒子为overflow: hidden或float: left来实现左右固定，中间自适应的布局。这种方法通常用于需要清除浮动影响或创建独立布局区域的场景。以下是实现代码：

.left {
    height: 400px;
    width: 200px;
    background-color: orange;
    float: left;
}
.right {
    height: 450px;
    background-color: skyblue;
    overflow: hidden;
}

工作原理：

• 左侧盒子设置float: left，使其脱离普通流。
• 右侧盒子设置overflow: hidden，清除浮动元素的影响，并创建独立的布局区域。
• 通过BFC，左右盒子分别占据自己的区域，中间区域自动调整以适应整个容器的高度。

4. 两侧固定中间自适应

以下是一个典型的左右固定中间自适应布局示例：

.left {
    float: left;
    width: 200px;
    height: 400px;
    background-color: blue;
}
.right {
    float: right;
    width: 200px;
    height: 400px;
    background-color: blue;
}
.center {
    height: 450px;
    background-color: green;
    overflow: hidden;
}

工作原理：

• 左右两侧盒子分别设置float: left和float: right，固定在页面的两侧。
• 中间盒子设置overflow: hidden，清除浮动元素的影响，并通过BFC确保其占据剩余的空间。
• 中间盒子自动调整高度，适应整个父盒子的容器高度。

总结

以上是实现左右固定中间自适应布局的几种常用方法。无论是Flex布局、定位布局还是BFC，都是在不同场景下选择最合适的布局方式。理解每种方法的工作原理，是实现高效布局的关键。在实际项目中，需要根据具体需求选择最适合的实现方式，以确保布局效果和性能表现。

转载地址：http://vrqfk.baihongyu.com/