css布局两边固定中间自适应的五种方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css布局两边固定中间自适应</title>
  <style>
    /* 1、利用自身浮动 */
    .boxLeft{
      min-height: 100px;
      width: 200px;
      background: #987;
      float: left;
    }
    .boxRight{
      min-height: 100px;
      width: 300px;
      background: #369;
      float: right;
    }
    .boxCenter{
      min-height: 100px;
      margin-left: 220px;
      margin-right: 320px;
      background: #192;
    }

    /* 2、利用绝对定位 */
    .boxLeft2{
      min-height: 100px;
      width: 200px;
      background: #987;
      position: absolute;
      left: 0;
    }
    .boxRight2{
      min-height: 100px;
      width: 300px;
      background: #369;
      position: absolute;
      right: 0;
    }
    .boxCenter2{
      min-height: 100px;
      margin-left: 220px;
      margin-right: 320px;
      background: #192;
    }

    /* 3、利用弹性布局 */
    .box3{
      display: flex;
    }
    .boxLeft3{
      min-height: 100px;
      width: 200px;
      background: #987;
    }
    .boxRight3{
      min-height: 100px;
      width: 300px;
      background: #369;
    }
    .boxCenter3{
      min-height: 100px;
      margin: 0 20px;
      background: #192;
      flex: 1;
    }

    /* 4、利用负margin */
    .boxCenter4{
      width: 100%;
      min-height: 100px;
      float: left;
    }
    .center{
      min-height: 100px;
      margin-left: 220px;
      margin-right: 320px;
      background: #192;
    }
    .boxLeft4{
      min-height: 100px;
      width: 200px;
      background: #987;
      float: left;
      margin-left: -100%;
    }
    .boxRight4{
      min-height: 100px;
      width: 300px;
      background: #369;
      float: left;
      margin-left: -300px;
    }

    /* 5、利用display */
    .box5{
      display: table;
      width: 100%;
    }
    .boxLeft5{
      min-height: 100px;
      width: 200px;
      background: #987;
      display: table-cell;
    }
    .boxCenter5{
      min-height: 100px;
      background: #192;
      margin: 0 20px;
    }
    .boxRight5{
      min-height: 100px;
      width: 300px;
      background: #369;
      display: table-cell;
    }
  </style>
</head>
<body>

  <h2>1、利用自身浮动</h2>
  <p>左右浮动两块div元素，脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度</p>
  <div class=box1>
    <div class="boxLeft">左边</div>
    <div class="boxRight">右边</div>
    <!-- 注意这个div一定要放最下面 -->
    <div class="boxCenter">中间</div>
  </div>

  <h2>2、利用绝对定位</h2>
  <p>左右绝对定位的两块div元素,脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度</p>
  <div class=box2>
    <div class="boxLeft2">左边</div>
    <div class="boxRight2">右边</div>
    <div class="boxCenter2">中间</div>
  </div>

  <h2>3、利用弹性布局</h2>
  <p>设置flex:1;可以自适应剩余空间</p>
  <div class=box3>
    <div class="boxLeft3">左边</div>
    <!-- 注意这个div一定要放中间 -->
    <div class="boxCenter3">中间</div>
    <div class="boxRight3">右边</div>
  </div>

  <h2>4、利用负margin</h2>
  <p>中间部分浮动，设置宽度100%，充满整个屏幕宽，内部一个div放置内容，利用margin设置留出左右两块的宽度</p>
  <div class=box4>
    <!-- 注意这个div一定要放最上面 -->
    <div class="boxCenter4">
      <div class="center">中间</div>
    </div>
    <div class="boxLeft4">左边</div>
    <div class="boxRight4">右边</div>
  </div>

  <h2>5、利用display:table;</h2>
  <div class=box5>
    <div class="boxLeft5">左边</div>
    <!-- 注意这个div一定要放中间 -->
    <div class="boxCenter5">中间</div>
    <div class="boxRight5">右边</div>
  </div>
</body>
</html>
css布局两边固定中间自适应的五种方法

猜你喜欢
