css 中间固定 两边自适应

CSS中间固定，两边自适应，被称为是“圣杯布局”。

实现这种布局需要用到CSS的盒模型和浮动。

首先我们来看一下HTML的标签结构：

div id="container">
      div id="center">
    Center/div>
      div id="left">
    Left/div>
      div id="right">
    Right/div>
    /div>

其中，center需要固定在中间，left和right需要自适应。

接下来我们来看一下CSS的实现：

#container {
      width: 100%;
}
#center {
      width: 60%;
      margin: 0 20%;
      float: left;
}
#left {
      width: 20%;
      float: left;
      margin-left: -100%;
}
#right {
      width: 20%;
      float: left;
      margin-left: -20%;
}
    

首先设置container的宽度为100%。

接下来设置center的宽度为60%（被占用的宽度），然后设置左右margin为20%（没有被占用的宽度），最后将center向左浮动。

然后将left向左浮动，并将margin-left设置为-100%，即向左移动一个left的宽度。

最后将right也向左浮动，并将margin-left设置为-20%，即向左移动一个right的宽度。

这样就实现了CSS中间固定，两边自适应的“圣杯布局”。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！