左右布局:左边定宽、右边自适应,3种方法

原创 ydsjiang 随笔 Web前端 1067阅读 2017-12-06 21:46:36 举报

方法一:左边设置左浮动,右边宽度设置100%
<div class="content">
<div class="left">左边定宽</div>
<div class="right">右边自适应</div>
</div>
.left{
float: left;
width: 300px;
background: yellow;
}
.right{
width: 100%;
background: #bbb;
}
方法二: 父容器设置 display:flex;Right部分设置 flex:1
<div class="content">
<div class="left">左边定宽</div>
<div class="right">右边自适应</div>
</div>
.content{
display: flex;
}
.left{
width: 300px;
background: yellow;
}
.right{
flex: 1;
background: #bbb;
}
方法三:设置浮动 + 在 css 中使用 calc() 函数
<div class="content">
<div class="left">左边定宽</div>
<div class="right">右边自适应</div>
</div>
.left{
float: left;
width: 300px;
background: yellow;
}
.right{
float: left;
width:calc(100% - 300px);
background: #bbb;
}

评论 ( 6 )
最新评论
lingwer111 2017-12-12 20:50:47 6F

如果业务场景中,高度不确定,这时候,浮动,定位都和网格都不能用, 唯一适用的是就是flex和表格布局。 flex布局适用于移动端,PC端兼容要求性高的可以用表格布局

lingwer111 3F 2017-12-12 20:40:42 5F

给右边加个overflow:hidden, 触发BFC就可以解决了

lingwer111 2017-12-12 20:39:49 4F

起码还有2种,表格布局和网格布局。表格布局有一个好处,单元格的高度改变,兄弟单元格也会跟着改变。 网格布局是未来布局的方向。

小枝节KKW 2017-12-11 17:07:29 3F

第一种有问题,右侧内容行数多余左侧时,会挤占左边

hmy_007 2017-12-11 14:30:33 2F

calc挺管用的

sia 2017-12-09 19:58:16 1F

calc 第二次遇到了