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>

  • 相关阅读:
    用 Mac 给树莓派重装系统
    Python:matplotlib 中文乱码的解决方案
    Python: 通过 pip 安装第三方包后依然不能 import
    Python: 安装 sklearn 包出现错误的解决方法
    grub2引导安装kali2.0及安装ibus拼音输入法
    2015移动安全挑战赛 第一题
    Linux kali 3.14-kali1-amd64 编译安装 wine 1.7.33
    git clone https协议问题
    常见问题
    Sieve_of_Eratosthenes
  • 原文地址:https://www.cnblogs.com/lcddjm/p/6873394.html
Copyright © 2011-2022 走看看