两边固定中间自适应布局解决方案5种
邵预鸿 Lv5
 2021-02-21 12:31:02   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--弹性布局-->
<!--   <style>
      .container{
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      .left,.right{
          flex:0 0 200px;
      }
      .center{
          flex:1;
      }
  </style> -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--table布局-->
  <!-- <style>
      .container{
          display: table;
          width: 100%;
      }
      .container>div{
          display: table-cell;
      }
      .left,.right{
          width: 200px;
          max-width: 200px;
          min-width: 200px;
      }
  </style> -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!--常用2-->
  <style>
      .container{
          padding: 0 200px;
          box-sizing: border-box;
          background-color: #eee;
          font-size: 0;
          position: relative;
      }


      .center{
          width:100%;
         
      }
      .left,.right{
          width:200px;
      }
     .left{
         position: absolute;
         left:0;
         top:0;
     }
     .right{
         position: absolute;
         right: 0;
         top: 0;
     }
  </style>
1
calc(100% - 200px)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--常用1-->
<!--   <style>
      .container{
          padding: 0 200px;
          box-sizing: border-box;
          background-color: #eee;
          font-size: 0;
      }
      .container:after{
          content:'';
           display: block;
           clear: both;
      }
      .container>div{
          float: left;
          font-size: 16px;
      }
      .center{
          width:100%;
      }
      .left,.right{
          width:200px;
      }
      .left{
          margin-left: -100%;
          position: relative;
          left: -200px;
      }
      .right{
          margin-left:-200px;
          position: relative;
          left: 200px;
      }
  </style> -->

HTML代码如下 

1
2
3
4
5
6
7
<body>
    <div class="container">
        <div class="center">center</div>
         <div class="left">left</div>
         <div class="right">right</div>
    </div>
</body>
  • 本文标题：两边固定中间自适应布局解决方案5种
  • 本文作者：邵预鸿
  • 创建时间：2021-02-21 12:31:02
  • 本文链接：/images/logo.jpg2021/02/21/两边固定中间自适应布局解决方案5种/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！