>웹 프론트엔드 >HTML 튜토리얼 >记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 11:23:231517검색

   前几天面试时有道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>

 

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.