Home  >  Article  >  Web Front-end  >  CSS: three-column layout, fixed on both sides, adaptive in the middle_html/css_WEB-ITnose

CSS: three-column layout, fixed on both sides, adaptive in the middle_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:50:491606browse

I was asked a layout question during an interview:
Three-column layout, fixed on both sides, adaptive in the middle

The answer given at that time was that the left and right sides floated left respectively. And right, middle adaptive, and then set a margin. It can be regarded as achieving the effect.

<style type="text/css">	*{margin:0;padding:0;}	.left{float:left;width:300px;background:red;height:500px;}	.right{float:right;width:300px;background:red;height:500px;}	.center{margin:0 230px;background:blue;}</style><div class="left">left</div><div class="right">right</div><div class="center">center</div>

Note: The middle column must be placed at the bottom

I found another way to implement positioning on the Internet. The left and right are set to fixed positioning, and the middle is adaptive.

<style type="text/css">	html,body{margin:0;padding:0;height:100%;}	.left,.right{		position:absolute;		top:0;		width:300px;		height:100%;		background-color:blue;	}	.left{		left:0;	}	.right{		right:0;	}	.center{		margin:0 230px;		height:100%;		color:#f90;		background:red;	}</style>

There are also interview questions like this: for example, fixed in the middle, adaptive on both sides; fixed on the left, adaptive on the right, etc. I'll study it when I have time.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn