快速业务通道

CSS布局之浮动(二)

作者 佚名技术 来源 CSS编程 浏览 发布时间 2012-05-27

在上一个文章里写了关于左(右)侧定宽右(左)侧自动缩放的两列浮动,这个文章就要说一下三列浮动的问题了。在之前说过,两列浮动是其他多列浮动的基础,明白了两列浮动的原理后,三列或三列以上的多列浮动也变得简单。

左侧中间定宽,右侧自适应:

因边左侧跟中间都是定宽的,只有右侧是自适应宽度的,所以这个三列浮动是和两列浮动中的左侧定宽右侧自适应一样的道理,HTML结构代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮动</title>
</head>

<body>
<div id=”a”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</body>
</html>


只需在两列浮动的CSS样式代码上再做轻微的改动:

#a{float:left; width:200px; background:#aaa;}
#b{float:left; width:200px; background:#f00;}
#c{background:#777; margin-left:400px;}

当然这里要记住一点,那就是必须给b对象一个左浮动。

左侧自适应,中间右侧定宽:

与左侧中间定宽右侧自适应一样的道理,当然前提是要把a、b、c三个对象在HTML的结构代码上更换一下顺序,浏览器的解释顺序应该是c-b-a,因为浮动在未浮动之前:

<body>
<div id=”c”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”a”>我是右边</div>
</body>

CSS代码如下:

#a{background:#aaa;}
#b{float:right; width:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}

左右两侧定宽,中间自适应:

这个布局应该是用得最多的,因为两边侧边栏的定宽,然后中间内容区自适应,这是很多网站常用的布局方式。很多人会在这里使用四个DIV来完成布局,即:

<body>
<div id=”a”>我是左边</div>
<div id=”box”>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</div>
</body>

通过一个嵌套的DIV来帮助完成三列浮动,这样的确是可以完成浮动布局的目的,但是不用这个嵌套仍然可以完成三列浮动的目的,既然可以省略一个嵌套,那为什么不省略一个呢?仅仅只需改变b跟c两者的顺序即可达到目的:

<body>
<div id=”a”>我是左边</div>
<div id=”c”>我是右边</div>
<div id=”b”>我是中间</div>
</body>

CSS代码如下:

#a{float:left; width:200px; background:#aaa;}
#b{margin-left:200px; margin-right:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}

这样,在基于两列浮动的基础之上,三列浮动的布局也完成了。

出处:

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号