设置一个两边固定中间自适应的css

1.两边浮动,中间自动宽度

给左右两个盒子设置左右浮动,中间的盒子不设置宽度,左右两边边距为左右盒子的宽度,中间盒子的位置必须写在右盒子下面,不然会把右盒子挤下去

如:

  <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
 
  <style>
        .left {
             100px;
            height: 100px;
            background-color: darkgoldenrod;
            float: left;
        }

        .center {
            margin-left: 100px;
            margin-right: 100px;
            height: 100px;
            background-color: darkmagenta;
        }

        .right {
             100px;
            height: 100px;
            background-color: darkgreen;
            float: right;

        }
2.绝对定位
把左右盒子设置为绝对定位。
 .left {
             100px;
            height: 100px;
            position: absolute;
            left: 0;
            background-color: darkgoldenrod;

        }

        .center {
            margin-left: 100px;
            margin-right: 100px;
            height: 100px;
            background-color: darkmagenta;
        }

        .right {
            top: 0;
             100px;
            height: 100px;
            position: absolute;
            right: 0;
            background-color: darkgreen;


        }
原文地址:https://www.cnblogs.com/xiaopo/p/14289100.html