两栏布局

一栏固定,一栏自适应

  • 左侧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
}
全部评论

相关推荐

11-03 18:50
门头沟学院 Java
迷茫的大四🐶:问就是马上到,一周五天,6个月以上,全国可飞
点赞 评论 收藏
分享
11-04 19:05
已编辑
东莞城市学院 单片机
不知道怎么取名字_:你这个要实习两年?哪有这么久的,感觉就是即使你毕业了,但还按实习的话,是不是不用给你缴社保公积金啥的
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

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