zoukankan      html  css  js  c++  java
  • css-两个div并排,左边宽度固定右边自适应的布局 的实现方法

    <div class= "container">
    <div class="left"></div>
    <div class="right"></div>
    </div>

    <style>
    /*方法一: BFC(块级格式化上下文)*/
    .container{
    1000px;height:400px;border: 1px solid red;
    }
    .left{
    200px;height:100%;background: gray;
    float: left;
    }
    .right{
    overflow:hidden; /* 触发bfc */
    background: green;
    }

    /*方法二: flex布局 */
    .container{
    1000px;height:400px;border:1px solid red;
    display:flex; /*flex布局*/
    }
    .left{
    200px; height:100%;background:gray;
    flex:none;
    }
    .right{
    height:100%;background:green;
    flex:1; /*flex布局*/
    }

    /* 方法三: table布局 */
    .container{
    1000px;height:400px;border:1px solid red;
    display:table; /*table布局*/
    }
    .left{
    200px; height:100%;background:gray;
    display:table-cell;
    }
    .right{
    height:100%;background:green;
    display: table-cell;
    }

    /*方法四: css计算宽度calc*/
    .container{
    1000px;height:400px;border:1px solid red;
    }
    .left{
    200px;height:100%;background:gray;
    float:left;
    }
    .right{
    height:100%;background:green;
    float:right;
    calc(100% - 200px);
    }
    /*方法五: margin-left方式*/
    .container{
    1000px;height:400px;border:1px solid red;
    }
    .left{
    float:left;200px;border:1px solid red;height:100%;background:gray;
    }
    .right{
    height:100%;border:1px solid blue;auto;margin-left:200px;
    }
    </style>

  • 相关阅读:
    数据结构算法(3)--排序
    数据结构算法(2)--字符串匹配
    数据结构与算法(0)-四则运算
    数据结构算法(1)--递归转化
    高级软件工程实践总结
    beta冲刺随笔集合
    Beta冲刺-用户测试报告
    Beta冲刺总结
    SDN期末作业-负载均衡的实现
    SDN第六次作业
  • 原文地址:https://www.cnblogs.com/juneling/p/9031374.html
Copyright © 2011-2022 走看看