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

在网站布局中，可能会遇到一种情况——两边是固定宽度的侧边栏，中间是自适应的内容区域。如何使用CSS实现这种布局呢？.sidebarleft{ float: left; width: 200px; } ...

在网站布局中，可能会遇到一种情况——两边是固定宽度的侧边栏，中间是自适应的内容区域。如何使用CSS实现这种布局呢？

.sidebar-left{
  float: left;
  width: 200px;
}

.content{
  margin-left:200px;
  margin-right:200px;
}

.sidebar-right{
  float: right;
  width: 200px;
} 

以上CSS代码实现了左右两边是200px的侧边栏，中间内容区域宽度自适应。其中，通过给左右两侧使用float属性实现了横向排列，而给中间内容区域使用margin-left和margin-right属性则实现了左右两侧的空出。

需要注意的是，如果左右两侧的宽度不一致，需要将中间内容区域的margin值作相应修改。同时，如果左右两侧的内容高度不同，需要使用clear属性清除浮动，以免出现排版错乱的情况。

总之，通过CSS的浮动和margin属性，可以实现左右两边宽度固定，中间自适应的网站布局效果。