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

CSS中固定两侧的布局方案固然好，但是当页面内容需要自适应时，这种布局方案就遇到了难题。不过，我们可以运用CSS技巧解决这个问题。 首先，我们需要创建一个带有容器的主体，如下所示： 现在...

CSS中固定两侧的布局方案固然好，但是当页面内容需要自适应时，这种布局方案就遇到了难题。不过，我们可以运用CSS技巧解决这个问题。

首先，我们需要创建一个带有容器的主体，如下所示：

 <div class="wrapper">
     <div class="left"></div>
     <div class="right"></div>
     <div class="content"></div>
   </div> 

现在我们给左侧和右侧容器添加样式：

 .left {
     float: left;
     width: 200px;
   }
   .right {
     float: right;
     width: 200px;
   } 

可以看到，左侧和右侧容器都是浮动元素，并且有一个固定的宽度。接着，我们需要为中间内容容器添加样式以使其适应页面内容：

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

这里我们使用了margin属性将内容容器与左侧和右侧容器分隔开，并且设置了左右两侧的外边距来适应页面内容的大小。

最后，我们需要清除浮动以保持布局的稳定性。可以在容器的最后添加一个清除浮动的元素：

 .wrapper:after {
     content: "";
     display: table;
     clear: both;
   } 

现在就可以运用这种方案来创建一个具有自适应内容的两侧固定布局。不过需要记住，左侧和右侧容器的宽度是固定的。