CSS 实现两边固定中间自适应-蒲公英云

CSS 实现两边固定中间自适应

悠悠 2023-01-13 06:27 315阅读 0赞

1，flex 布局

.box{
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .box1,.box3{
      flex: 0 0 200px;
      background: rgb(0, 255, 55);;
  }
  .box2{
      flex: 1;
      background-color: aqua
  }
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

2、定位

<style> .box0{ width: 100%;position: relative;height: 50px} .box4{ width: 200px;position: absolute;left: 0;top: 0;background-color: #00FFFF;height: 50px;} .box6{ width: 200px;position: absolute;right:0;top: 0;background-color: #00FFFF;height: 50px;} .box5{ height: 50px;} </style>
<div class="box0">
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
</div>

3、浮动

<style> .boxx{ width: 100%;height: 50px;} .lf{ float: left;width: 200px;background-color: #00FFFF;height: 50px;} .rf{ float: right;width: 200px;background-color: #00FFFF;height: 50px;} .ce{ height: 50px;background-color: red;} </style>
<div class="boxx">
    <div class="lf"></div>
    <div class="rf"></div>
    <div class="ce"></div>
</div>

4、利用calc(100% - 400px)计算中间部分宽度,可以是浮动或者第行内块

<style> .boxx{ width: 100%;height: 50px;} .lf,.rf{ display: inline-block;vertical-align: top;width: 200px;height: 50px;background-color: #00FFFF;} .ce{ display: inline-block;vertical-align: top;height: 50px;background-color: red;width:calc(100% - 400px);} </style>
<div class="boxx">
    <div class="lf"></div>
    <div class="ce"></div>
    <div class="rf"></div>
</div>

5、利用margin

<style> .box{ padding: 0 200px; } .ce{ width: 100%; float: left; background-color: aqua; } .lf{ width: 200px; float: left; margin-left: -100%; position: relative; left: -200px; background-color: rgb(0, 255, 106); } .rf{ width: 200px; float: left; margin-left: -200px; position: relative; right: -200px; background-color: rgb(0, 255, 55); } </style>
<div class="box">
    <div class="lf"></div>
    <div class="ce"></div>
    <div class="rf"></div>
</div>