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

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

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

如：

  <div class="left"></div>

    <div class="right"></div>

    <div class="center"></div>

 

  <style>

        .left {

            width: 100px;

            height: 100px;

            background-color: darkgoldenrod;

            float: left;

        }

        .center {

            margin-left: 100px;

            margin-right: 100px;

            height: 100px;

            background-color: darkmagenta;

        }

        .right {

            width: 100px;

            height: 100px;

            background-color: darkgreen;

            float: right;

        }

2.绝对定位

把左右盒子设置为绝对定位。

 .left {

            width: 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;

            width: 100px;

            height: 100px;

            position: absolute;

            right: 0;

            background-color: darkgreen;

        }