流式布局
流式布局的实质:百分比布局
转换公式
目标元素的宽度/上下级元素的宽度(父级元素的宽度)=百分比宽度;
弹性图片
去掉图片的宽高,指定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