两个div并排,一个固定宽度,一个自适应

2017-08-14  本文已影响1193人  5df463a52098

html

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

css
方式一:BFC(块级格式化上下文)

      .wrap{
            width:1000px;
            height:400px;
            border: 1px solid red;
        }
        .left{
            width:200px;
            height:100%;
            background: gray;
            float: left;
        }
        .right{
            overflow:hidden;  /* 触发bfc */
            background: green;
            height: 100%;
        }

方式二:flex布局

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

方式三:table

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

方式四:calc计算

         .wrap{
            width:1000px;
            height:400px;
            border:1px solid red;
        }
        .left{
            width:200px;
            height:100%;
            background:gray;
            float:left;
        }
        .right{
            height:100%;
            background:green;
            float:right;
            width:calc(100% - 200px);
        }

方式五:margin-left

       .wrap{
            width:1000px;
            height:400px;
            border:1px solid red;
        }
        .left{
            float:left;
            width:200px;
            border:1px solid red;
            height:100%;
            background:gray;
        }
        .right{
            height:100%;
            border:1px solid blue;
            width:auto;
            background:green;
            margin-left:200px;
        }
上一篇 下一篇

猜你喜欢

热点阅读