两栏布局

一栏固定,一栏自适应

  • 左侧float,右侧margin-left
<div class="left">left</div>
<div class="right">right</div>
.left,.right{
    height:200px
}
.left{
    width:200px;
    float:left;
    background-color:red;
}
.right{
    margin-left:200px;
    background-color:yellow;
}
  • 绝对定位
<div class="left">left</div>
<div class="right">right</div>
.left,.right{
    height:200px
}
.left{
    position:absolute;
    left:0;
    width:200px;
    background-color:red;
}
.right{
    position:absolute;
    left:200px;
    right:0;
    background-color:yellow;
}
  • 弹性布局
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
.container{
    display:flex;
}
.left,.right{
    height:200px
}
.left{
    width:200px;
    background-color:red   
}
.right{
    flex:1;
    background-color:yellow
}
全部评论

相关推荐

10-25 19:38
已编辑
门头沟学院 嵌入式工程师
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务