zoukankan      html  css  js  c++  java
  • 左边固定宽 右边自适应布局

    <!DOCTYPE html>
    <html lang="en">
    <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>左边定宽,右边自适应布局</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            .main{
                height:400px;
                100%;
            }
            /*

            .main > div{
                float:left;
                height:100%;
            }
            .right{
                100%;
                padding-left:200px;
                box-sizing: border-box;
                background:#ff0;
            }
            .left{
                float:left;
                200px;
                margin-left:-100%;
                background:#f00;
            }*/


            /*定位*/
            /*.main{
                position: relative;
            }
            .right{
                100%;
                height:100%;
                padding-left:200px;
                box-sizing: border-box;
                background:#ff0;
            }
            .left{
                position: absolute;
                200px;
                height:100%;
                top: 0;
                left: 0;
                background:#f00;
            }*/

            /*  flex方式  */
            .left{
                100px;
                height:100%;
                float:left;
                background:#ff0;
            }
            .right{
                margin-left:100px;
                background:#f0f;
                height:100%;
                box-sizing: border-box;
                margin
            }

        </style>
    </head>
    <body>
        <div class="main">
            <div class="left">12222</div>
            <div class="right">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores quia reprehenderit debitis sit eveniet perspiciatis, placeat facere quam, adipisci consectetur magnam eos. Ullam voluptatem error vel. Odio ipsum, neque tempora nulla repellat dignissimos quis distinctio? Laborum cum quidem modi saepe, dolores maiores totam, excepturi placeat eaque itaque inventore cupiditate dolore.
            </div>
        </div>
    </body>
    </html>

  • 相关阅读:
    eggjs 打印mysql日志!!!
    emqx ws转成wss
    华为 荣耀 Android 8.0 安装Google服务 使用google play
    angular + mqtt
    Angular路由参数传递
    Splay学习笔记
    FJOI2019 游记[大概是考完会解封?]
    地图游戏
    「Neerc2016」Expect to Wait
    [BZOJ5248][2018九省联考]一双木棋
  • 原文地址:https://www.cnblogs.com/lcddjm/p/6873394.html
Copyright © 2011-2022 走看看