zoukankan      html  css  js  c++  java
  • css布局之左侧宽度固定,右侧宽度自适应

    方案一:利用padding-left预留空间,左侧脱标,右侧宽度相当于父元素的100%

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>左侧宽度固定,右侧宽度自适应</title>
        <style>
            .container{
                padding-left: 300px;
                 100%;
                height: 500px;
                background-color: cadetblue;
                position: relative;
            }
            .left{
                position: absolute;
                left: 0;
                top: 0;
                 300px;
                height: 500px;
                background-color: brown;
            }
            .right{
                height: 500px;
                 100%;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
    <div class="container">
       <div class="left">left</div>
       <div class="right">
           right
           right
           right
           right
           right
       </div>
    </div>
    </body>
    </html>
    

      

    方案二:左侧设置浮动,右侧不指定宽度

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .left{
                float: left;
                 500px;
                height: 500px;
                background-color: cadetblue;
            }
            .right{
                height: 500px;
                background-color: brown;
            }
        </style>
    </head>
    <body>
    <div class="left">left</div>
    <div class="right">right</div>
    </body>
    </html>
    

      

  • 相关阅读:
    做过的笔试题
    (转)32位机器中int的字长
    JS_void()
    JS_增加事件,移除事件,动态元素的增删事件研究
    JS_animate 站在别人的肩膀上
    JS_对象的方法
    JS_Class.extend
    JS_返回值
    JS_eventBind
    JS_应用对象的复制
  • 原文地址:https://www.cnblogs.com/landofpromise/p/6650609.html
Copyright © 2011-2022 走看看