記一道css面試題 : 三欄佈局兩邊寬度固定，中間寬度自適應，而且佈局隨屏幕大小改變。

時間 2019-12-11

標籤一道 css 面試佈局兩邊寬度固定中間自適應而且屏幕大小改變欄目 CSS 简体版

原文原文鏈接

　　前幾天面試時有道css題沒作出來，回來好好學習一番後把其記錄下來。javascript

　　題目是這樣的：左中右三欄佈局，左右兩欄寬度固定，左右兩欄的寬度爲200像素，中間欄寬度自適應。當屏幕小於600px時，3欄會分別佔用一行。像這樣css

　　當屏幕大於600px時，是這樣html

　　我作出來用了css3的@media，若是不用這個，好吧，水平有限想不出來。。。java

下面是代碼：
css3

<!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>

相關標籤/搜索