前端开发左右布局_3种方法

前端开发 js填充数据库|mac 前端开发ide|vuejs2前端开发pdf

方法一:左边设置左浮动,右边宽度设置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;
}

前端开发d3.js|ios 系统的前端开发|ios和前端开发的区别

» 本文来自:前端开发者 » 《前端开发左右布局_3种方法》
» 本文链接地址:https://www.rokub.com/5101.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!