两列布局

左侧固定,右侧自适应

方案一:左 float,右 margin

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
.left{
    float: left;
    width: 100px;
  background: yellow;
}
.right{
	margin-left: 120px;
  background: red;
}

方案二:左 float,右 BFC

形成了BFC的区域不会与float box重叠(可阻止因浮动元素引发的文字环绕现象)。

.left{
    float:left;
    width:100px;
    margin-right:20px;
}
.right{
    overflow:hidden;/*触发BFC*/
    /*_zoom:1;*/ /*IE6使用zoom:1来触发BFC*/
}

方案三:table

.parent{
    display: table; 
    width: 100%;
    table-layout: fixed; /*加速table渲染,实现布局优先*/
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

方案四:flex

只兼容 IE10+

.parent{
    display: flex;
 }
 .left{
    width: 100px;
    margin-right: 20px;
 }
 .right{
    flex:1;
 }

方案五:grid

Last Updated: 9/11/2019, 8:53:50 AM