前端面试题之CSS两栏布局(左栏固定，右栏随父级宽度改变)

最新推荐文章于 2024-05-07 17:11:19 发布

BYYDMNZ

最新推荐文章于 2024-05-07 17:11:19 发布

阅读量757

点赞数

分类专栏：前端 CSS 文章标签：前端 CSS 面试题

本文链接：https://blog.csdn.net/byydmnz/article/details/80753600

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

今天去面试，面试官问了一道很常见的CSS布局题目。实现两栏布局，左栏固定宽度，右栏宽度与父级容器宽度一致，随父级容器宽度改变而改变。

下面是实现代码：大致思路是给父级容器设置padding-left为左栏的宽度，给左栏设置绝对定位，定位至父级容器的左边left：0px，右栏设置宽度为100%，此时右栏的宽度随父级的宽度改变，右栏的宽度始终等于父级的宽度。例子中右栏width=800px。

<div class="box">
	<div class="box1">left</div>
	<div class="box2">right</div>
</div>

<style type="text/css">
        .box{
		    width: 800px;
		    position: relative;
		    padding-left: 200px;
        }
      	.box1{
      		width: 200px;
      		height: 500px;
      		background: red;
      		position: absolute;
      		left: 0;
      	}
      	.box2{
      		width: 100%;
      		height: 500px;
      		background: green;
      	}
</style>

效果图：