记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。

Posted 2020-06-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。相关的知识，希望对你有一定的参考价值。

　　前几天面试时有道css题没做出来，回来好好学习一番后把其记录下来。

　　题目是这样的：左中右三栏布局，左右两栏宽度固定，左右两栏的宽度为200像素，中间栏宽度自适应。当屏幕小于600px时，3栏会分别占用一行。像这样

技术分享

　　当屏幕大于600px时，是这样

技术分享

　　我做出来用了css3的@media，如果不用这个，好吧，水平有限想不出来。。。

下面是代码：

<!DOCTYPE>
<html>
<head>
<style>
body{
	margin: 0 ;
	padding: 0;
}
@media screen and (min-width: 600px){
	.left,.right{
		position: absolute;
		top:0;
		height: 50px;
		width: 200px;
	}
	.left{
		left:0;
		background-color: red;
	}
	.center{
		height: 50px;
		margin: 0 200px;
		background-color: orange;	
	}
	.right{
		right:0;
		background-color: blue;		
	}
}
@media screen and (max-width: 600px){
	.left,.right{
		height: 50px;
		width: 200px;
		float:left;
	}
	.left{
		background-color: red;
	}
	.center{	
		width: 100%;
		height: 50px;	
		float: left;
		background-color: orange;	
			}
	.right{
		background-color: blue;	
		}
}


</style>
<head>
<body>
	<div class="left">left</div>
	<div class="center">center</div>
	<div class="right">right</div>
</body>
</html>

以上是关于记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。的主要内容，如果未能解决你的问题，请参考以下文章

css三栏布局两边固定中间自适应的五种方式

CSS创建三栏布局（两侧宽度固定，中间宽度自适应）的几种方法