CSS固定宽度的三列布局运用实例解析

雪是一种能够令人产生多种情绪的东西，当窗外那像柳絮、像芦花般的雪花，正在纷纷扬扬地从天而降的时候，当大地被雪花装饰得像铺上白色的地毯一样的时候，站在窗户边上，望着它们。

固定宽度三列布局
这很基础，我们直接看代码便能明白：

XML/HTML Code复制内容到剪贴板

<divid="wrapper">
<divid="header">header</div>
<divid="body"class="cls">
<divid="aside">
<divclass="inner">
aside
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<divid="content"class="cls">
<divid="main">
<divclass="inner">
main
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<divid="content-aside">
<divclass="inner">
content-aside
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</div>
<divid="footer">footer</div>
</div>

CSS Code复制内容到剪贴板

#header{width:980px;height:90px;margin:0auto;background:#f60;}
#body{width:980px;margin:0auto;}
#aside{float:left;width:240px;background:#ccc;}
#content{margin-left:240px;}
#main{float:left;width:540px;background:pink;}
#content-aside{float:left;width:200px;background:orange;}
#footer{width:980px;height:90px;margin:0auto;background:#08f;}

实例：实现三列图片等宽等间距布局

每个图片块左浮动,宽30%,左外边距2.5%:
100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%

CSS Code复制内容到剪贴板

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<title>三列图片等宽布局</title>
<style>
*{
margin:0;
padding:0;
}
img{
display:block;
width:30%;
margin:2.5%002.5%;
float:left;
}
</style>
</head>
<body>
<div>
<imgsrc="byd.jpg"/><imgsrc="byd.jpg"/><imgsrc="byd.jpg"/>
<imgsrc="byd.jpg"/><imgsrc="byd.jpg"/><imgsrc="byd.jpg"/>
<imgsrc="byd.jpg"/><imgsrc="byd.jpg"/><imgsrc="byd.jpg"/>
</div>
</body>
</html>

width: 30%; 表示父级元素宽度的30%.
height: 30%; 如果没有设置父级元素的具体高度,那么这个height是没有效果的.
要实现响应式的正方形,可以使用单位vw(Viewport Width):

CSS Code复制内容到剪贴板

.square{
width:30%;
height:30vw;
background:url("byd.jpg")no-repeatscrollcenter0transparent;
background-size:100%100%;
margin:2.5%002.5%;
float:left;
}

不过需要注意的是,低版本IE和低版本Android/iOS浏览器都不支持视窗(viewport)单位.
或者使用JS根据宽设置高,保证兼容性:

JavaScript Code复制内容到剪贴板

<scriptsrc="jquery.js"></script>
<script>
$(document).ready(function(){
$("img").height($("img").width());
});
$(window).resize(function(){
$("img").height($("img").width());
});
</script>

百分比布局也可以看做是一种响应式布局.
简单实用的百分比布局还是很适合手机WAP页面布局的:

CSS Code复制内容到剪贴板

min-width:320px;
max-width:980px;
width:100%;
overflow-x:hidden;
margin:0auto;

最小宽度320px,最大宽度980px,在320px和980px之间自动适应宽度,看起来还行.
在<img>标签里只用设置width属性百分比值,比如width="40%",不用设置height属性,这样图片能够自行按原比例缩放.
容器里面的块,同样可以用百分比布局,比如左边的60%,右边的40%.

本文CSS固定宽度的三列布局运用实例解析到此结束。语文，心灵的回响，惹人走向崇高的殿堂。小编再次感谢大家对我们的支持！

全站频道

大家都在搜索：