• 两栏布局,左边定宽,右宽自适应,左边宽与右边保持一致


    见代码

        <div id="wrap">
            <div id="left">
                <h1>134132412</h1>
                <h1>134132412</h1>
            </div>
            <div id="right">
                <h1>134132412</h1>
                <h1>134132412</h1>
                <h1>134132412</h1>
                <h1>134132412</h1>
                <h1>134132412</h1>
                <h1>134132412</h1>
            </div>
        </div>

    css代码

    <style type="text/css">
            #wrap {
                width: 100%;
                height: 100%;
                background-color: aqua;
                border: 1px solid black;
                border-bottom: 0px solid trans;
                display: flex;
            }
            
            #left {
                width: 300px;
                background-color: yellow;
                border: 1px solid black;
            }
            
            #right {
                flex:1;
                background-color: red;
                border: 1px solid black;
    overflow-x:hidden;
            }
            
            #left h1 {
                width: 100%;
                height: 100px;
            }
            
            #right h1 {
                width: 100%;
                height: 100px;
            }
        </style>

     这段代码主要用到 display:flex;弹性盒模型。达到效果是:左边固定,右边自适应,左边高度和父元素等高

  • 相关阅读:
    ==和equals区别
    如何创建一个不可变类
    mysql用户的创建和授权
    事务
    Java知识点检测
    Redis
    正则表达式中match的用法
    rfind的用法
    找出文件夹里所有的文件路径
    合并多个pdf文件
  • 原文地址:https://www.cnblogs.com/gangerdai/p/6892321.html
Copyright © 2020-2023  润新知