| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS布局之浮动(二)

2008-08-16 07:22:39  編輯來源:互聯網  简体版  手機版  評論  字體: ||
 
  在上一个文章里写了关于左(右)侧定宽右(左)侧自动缩放的两列浮动,这个文章就要说一下三列浮动的问题了。在之前说过,两列浮动是其他多列浮动的基础,明白了两列浮动的原理后,三列或三列以上的多列浮动也变得简单。

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

  因边左侧跟中间都是定宽的,只有右侧是自适应宽度的,所以这个三列浮动是和两列浮动中的左侧定宽右侧自适应一样的道理,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.prower.cn/technic/195
 
 
 
在上一个文章里写了关于左(右)侧定宽右(左)侧自动缩放的两列浮动,这个文章就要说一下三列浮动的问题了。在之前说过,两列浮动是其他多列浮动的基础,明白了两列浮动的原理后,三列或三列以上的多列浮动也变得简单。 左侧中间定宽,右侧自适应: 因边左侧跟中间都是定宽的,只有右侧是自适应宽度的,所以这个三列浮动是和两列浮动中的左侧定宽右侧自适应一样的道理,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;} 这样,在基于两列浮动的基础之上,三列浮动的布局也完成了。 出处:[url=http://www.prower.cn/technic/195]http://www.prower.cn/technic/195[/url]
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 
 熱帖排行
 
 
王朝网络微信公众号
微信扫码关注本站公众号 wangchaonetcn
 
  免责声明:本文仅代表作者个人观点,与王朝网络无关。王朝网络登载此文出于传递更多信息之目的,并不意味著赞同其观点或证实其描述,其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有