zoukankan      html  css  js  c++  java
  • 左边固定,右边自适应解决方案

    1 首先利用浮动

    给左边设置宽度,高度,浮动为left

    右边不写宽度,给高度,给margin-left设置左边容器的宽度,撑开

    因为div属于块级元素会自动占满一行

    <!DOCTYPE html>
    
    <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>Document</title>
      <style>
        .left {
          width: 200px;
          height: 100px;
          background: blueviolet;
        }
    
        .right {
          background: goldenrod;
          height: 100px;
        }
    
        .l {
          float: left;
        }
    
        .r {}
      </style>
    </head>
    
    <body>
      <div>
        <div class="left l">固定200px</div>
        <div class="right r">自动充满</div>
      </div>
    </body>
    <script>
    
    </script>
    
    </html>

    2 利用定位

    父级设置相对定位

    左右设置为绝对定位,右边的设置为宽度百分之百,开启怪异盒子,padding-left设置为左边的宽度,

    重点左边的设置z-index为1,浮动在右边的上边

    <!DOCTYPE html>
    
    <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>Document</title>
      <style>
        .left {
          width: 200px;
          height: 100px;
          background: blueviolet;
        }
    
        .right {
          background: goldenrod;
          height: 100px;
        }
    
        .l {
          position: absolute;
          z-index: 1;
        }
    
        .r {
          position: absolute;
          right: 0;
          top: 0;
          width: 100%;
          padding-left: 200px;
          box-sizing: border-box;
        }
      </style>
    </head>
    
    <body>
      <div style="position: relative;">
        <div class="left l">固定200px</div>
        <div class="right r">自动充满</div>
      </div>
    </body>
    <script>
    
    </script>
    
    </html>

    3利用弹性盒子

    <!DOCTYPE html>
    
    <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>Document</title>
      <style>
        .left {
          width: 200px;
          height: 100px;
          background: blueviolet;
        }
    
        .right {
          background: goldenrod;
          height: 100px;
        }
    
        .l {}
    
        .r {
          flex: 1;
        }
      </style>
    </head>
    
    <body>
      <div style="display: flex;">
        <div class="left l">固定200px</div>
        <div class="right r">自动充满</div>
      </div>
    </body>
    <script>
    
    </script>
    
    </html>
  • 相关阅读:
    建模算法(九)——拟合 (转)
    Swift初探一
    D3DXMatrixMultiply 函数
    魔术师发牌和拉丁方阵
    strip 命令的使用方法
    GDI编程小结
    Android多媒体-MediaRecorder 录制音视频
    Android 使用Gson解析json案例具体解释
    有依赖的背包问题(背包九讲)
    c++ 正則表達式
  • 原文地址:https://www.cnblogs.com/skydragonli/p/11669142.html
Copyright © 2011-2022 走看看