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>

  • 相关阅读:
    Linux中的计算器(bc)
    在Linux中显示日历(cal)
    在Linux中显示日期(date)
    Linux中的注销当前用户
    Linux中的提示符
    在Linux中启动X Window
    硬盘知识
    划分Linux分区
    Linux中的关机
    hdu4424 Conquer a New Region 并查集/类似最小生成树
  • 原文地址:https://www.cnblogs.com/lcddjm/p/6873394.html
Copyright © 2011-2022 走看看