demo－浮动实现两边固定中间自适应.html

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>浮动 两边固定中间自适应</title>
    <style>
      *{
        padding: 0px;
        margin: 0px;
      }
      .parent{
        width: 100%;
        height: 1000px;
        background-color: red;
        /*display: flex;
        flex-direction: row;*/
      }
      .child1{
        width: 100px;
        height: 1000px;
        background-color: yellow;
        float: left;
      }
      .child2{
        width: 100%;
        height: 1000px;
        background-color: #D8E2E6;
      }
      .child3{
        width: 100px;
        height: 1000px;
        background-color: yellow;
        float: right;
      }
    </style>
</head>

<body>
  <div class="parent">
    <div class="child1"></div><!-- 浮动元素要在中间盒子之前 -->
    <div class="child3"></div>
    <div class="child2"></div>
    
  </div>
  
</body>

</html>