[分享]css两边定宽中间自适应

在Web开发中，经常会出现需要将一个元素的左右两边保持不变的宽度，而中间的部分可以自适应的需求。这时，我们可以运用CSS中的一些技巧来实现这个效果。首先，我们可以先设置一个固定宽度的容器，再将其中的内...

在Web开发中，经常会出现需要将一个元素的左右两边保持不变的宽度，而中间的部分可以自适应的需求。这时，我们可以运用CSS中的一些技巧来实现这个效果。

首先，我们可以先设置一个固定宽度的容器，再将其中的内容区域设置为百分比宽度，这样就可以实现中间自适应的效果。

.container {
  width: 980px; /* 固定宽度 */
  margin: 0 auto; /* 居中 */
}
.content {
  width: 70%; /* 百分比宽度 */
  float: left; /* 左浮动 */
}
.sidebar {
  width: 30%; /* 百分比宽度 */
  float: left; /* 左浮动 */
}
.clearfix::after {
  content: "";
  display: block;
  clear: both; /* 清除浮动 */
} 

在上面的代码中，我们首先定义了一个名为.container的容器，它的宽度为固定的980px。然后，我们将内容区域和侧栏都使用百分比宽度进行设置，这样就可以根据实际情况自适应了。其中，我们将两个区域都设置为左浮动，这样就可以实现两边定宽的效果。

最后，我们还需要添加一个clearfix类来清除浮动，避免出现不必要的问题。

综上所述，通过设置固定宽度的容器，再使用百分比宽度设置中间的内容区域，我们可以轻松实现CSS两边定宽中间自适应的效果。