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>
  • 相关阅读:
    Fast Search:爬网测试 金大昊(jindahao)
    FAST Search :deployment.xml
    TFS:强制签入已签出的文件 金大昊(jindahao)
    采用权限控制的工作流权限设计 金大昊(jindahao)
    FAST Search :创建自定义属性 金大昊(jindahao)
    SharePoint:替换搜索结果连接URL 金大昊(jindahao)
    SharePoint:迁移
    SharePoint:关于word模板内容类型(template.dotx) 金大昊(jindahao)
    SharePoint:备份和还原
    BCS 爬网报错 金大昊(jindahao)
  • 原文地址:https://www.cnblogs.com/skydragonli/p/11669142.html
Copyright © 2011-2022 走看看