自适应布局

梦里梦外; 2023-08-17 17:39 135阅读 0赞

常见自适应布局有两种：左侧固定右侧自适应、左右两侧固定中间自适应

左侧固定，右侧自适应

**1、子元素 float:left**

// html部分
    <div class='container'>
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>
    
    // css部分
    .container{
      position: relative;
      width: 100%;
    }
    .left{
      float: left;
      width: 200px;
      height: 300px;
      background-color: green;
    }
    .right{
      background-color: pink;
      height: 300px;
    }

**2、子元素 width:calc()**

**3、父元素 display: flex**

// html部分
    <div class='container'>
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>
    
    // css部分
    .container{
      position: relative;
      width: 100%;
      display: flex;
    }
    .left{
      width: 200px;
      height: 300px;
      background-color: green;
    }
    .right{
      flex: 1;
      height: 300px;
      background-color: pink;
    }

左右2列固定，中间自适应

**1、子元素 width:calc()**

// html部分
    <div class="container">
      <div class="left">左侧定宽</div>
      <div class="mid">中间自适应</div>
      <div class="right">右侧定宽</div>
    </div>
    
    // css部分
    .container {
        position: relative;
        width: 100%;
    }
     
    .left {
        float: left;
        width: 100px;
        height: 100%;
        background-color: #72e4a0;
    }
     
    .mid {
        float: left;
        width: calc(100% - 100px - 100px);
        height: 100%;
        background-color: #9dc3e6;
    }
     
    .right {
        float: left;
        width: 100px;
        height: 100%;
        background-color: #4eb3b9;
    }

**2、父元素 display: flex**

<div class="container">
      <div class="left">左侧定宽</div>
      <div class="mid">中间自适应</div>
      <div class="right">右侧定宽</div>
    </div>
    
    // css部分
    .container{
      position: relative;
      display: flex;
    }
    .left{
      width: 200px;
      height: 300px;
      background-color: green;
    }
    .right{
      width: 200px;
      height: 300px;
      background-color: yellow;
    }
    .mid{
      flex: 1;
      height: 300px;
      background-color: pink;
    }

转载于:https://www.cnblogs.com/00feixi/p/11269589.html