Home > Web Front-end > HTML Tutorial > 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
Release: 2016-06-24 11:50:49
Original
1642 people have browsed it

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>
Copy after login

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>
Copy after login

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.

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template