CSS 三栏布局之宽度自适应

开场白

页面采用流动性布局(亦可称自适应布局)在网页设计中现在已经很常见了,今天整理了一些关于宽度自适应的内容,希望加深自己对宽度自适应原理的理解。
参考了一篇挺好的博客,这篇博客帮助我很快的理解了三种自适应方法的原理,下面我将融合一些自己的理解,对自适应基于样例做一些记录。
参考博客如下:
https://www.zhangxinxu.com/wordpress/2009/11/我熟知的三种三栏网页宽度自适应布局方法/

一、布局描述

三栏布局,左右栏固定宽度200px,中间栏宽度自适应,高度都是100%。
效果:
CSS 三栏布局之宽度自适应_第1张图片
CSS 三栏布局之宽度自适应_第2张图片

二、绝对定位法

先看代码:


<html>
<head>
	<title>Adaptive layouttitle>
	<style type="text/css">
		html,body{
    
			margin: 0;
			height: 100%;
		}
		#left,#right{
    
			position: absolute;/*here is the point*/
			top: 0;
			width: 200px;
			height: 100%;
		}
		#left{
    
			left: 0;/*here is the point*/
			background: pink;
		}
		#right{
    
			right: 0;/*here is the point*/
			background: pink;
		}
		#main{
    
			margin

你可能感兴趣的:(CSS,CSS,自适应,float,负margin定位)