设置一个两边固定中间自适应的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;

        }

__EOF__

本文作者：xiaopo
本文链接：https://www.cnblogs.com/xiaopo/p/14289100.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！