如何实现：页面两栏布局左侧固定、右侧自适应

最新推荐文章于 2024-09-11 14:09:02 发布

穗穗叨叨

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量252

点赞数

分类专栏：学习笔记文章标签： html flex css

本文链接：https://blog.csdn.net/suisui0725/article/details/104701404

版权

学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<div class="box">
   <div class="inner_box_left">1</div>
   <div class="inner_box_right">2</div>
</div>

方法一：利用flex布局

.box{
    display: flex;
}
.inner_box_left{
	width:100px;
	backgroud-color:green;
}
.inner_box_right{
	flex: 1 0 auto;
	backgroud-color:red;
}

方法二：利用左侧float+右侧margin

.inner_box_left{
    width: 100px;
    float: left;
    background-color: green;
}
.inner_box_right{
    background-color: red;
    margin-left:100px;
}

方法三：利用左侧float+右侧float+右侧calc宽度

.inner_box_left{
    width: 100px;
    float: left;
    background-color: green;
}
.inner_box_right{
    background-color: red;
    float: right;
    width:calc(100% - 100px);
}

方法四：利用左侧float+右侧overflow

.inner_box_left{
    width: 100px;
    float: left;
    background-color: green;
}
.inner_box_right{
    background-color: red;
    overflow:hidden;
}