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>
  • 相关阅读:
    Asp.Net 加密 web.config中的某个敏感信息
    异步模型中HttpWebRequest的Timeout
    WCF路由所有的请求到一个方法route all request to one operation
    .Net中直接操作内存
    【转】.NET AJAX实例
    【原】IE/FF 强制浏览器不读取缓存(强制刷新)
    【精】经典的css技巧
    【转】C#如何获取客户端/服务端IP地址
    【原】FireFox显示滚动条 [解决页面左右移动]
    【原】Function Import in Entity Framework 4 issue
  • 原文地址:https://www.cnblogs.com/skydragonli/p/11669142.html
Copyright © 2011-2022 走看看