HTML5学习_day12(2)--流式布局

流式布局

流式布局的实质：百分比布局

转换公式

目标元素的宽度/上下级元素的宽度(父级元素的宽度)=百分比宽度；

弹性图片

去掉图片的宽高，指定max-width:100%;可以使图片缩放到与包含其容器的宽度的100%匹配。

两个简单例子：

例子1：

<span style="white-space:pre">			</span><style type="text/css">
				#wrap{
					width: 800px;
					height: 600px;
					margin: 30px auto;
				}
				.header{
					width: 100%;
					height: 100px;
					background: gold;
				}
				.content{
					width: 100%;
					height: 400px;
				}
				.content div{
					float: left;
				}
				.content:after{
					content: "";
					display: block;
					clear: both;
				}
				.content .leftside{
					width: 30%;
					height: 400px;
					background-color: salmon;
				}
				.content .middle{
					width: 40%;
					height: 400px;
					background: olivedrab;
				}
				.ri