WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>DIV CSS HTML>>DIV布局之道四:clear:both清除DIV两侧浮动详解

DIV布局之道四:clear:both清除DIV两侧浮动详解

[ 录入者:91ctc | 时间:2012-02-26 14:35:11 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

我们要实现图中表格实现的效果,使用DIV+CSS该如何实现呢?

众所周知,要实现如上效果,我们写一个两行两列的表格,使得表格第二行两个单元格合并即可实现上图效果,可以使用如下代码实现:

XML/HTML Code复制内容到剪贴板
  1. <table width="303" height="151" border="1" align="center" cellpadding="1" cellspacing="0" bordercolor="#33CCFF">  
  2.   <tr>  
  3.     <td align="center">单元格一</td>  
  4.     <td align="center">单元格二</td>  
  5.   </tr>  
  6.   <tr>  
  7.     <td colspan="2" align="center">单元格三</td>  
  8.   </tr>  
  9. </table>  

上面代码仅仅使用了九行(如果不换行,也许三行即可,但是我们还是按照习惯计算行数)、相对简洁的代码就实现了这个效果,而且还没有使用到CSS就已经达到了布局效果,但是当我们使用DIV+CSS来布局该如何编写代码呢。

我们先将代码告诉访客:

CSS Code复制内容到剪贴板
  1. .clear{clear:both}   
  2. .center_middle {text-align:centervertical-align:middleline-height:100px;}   
  3. .contain {width:283pxheight:210pxmargin:0px autopadding:0px 8px 0px 8px;}   
  4. .box1 { float:leftwidth:139pxheight:100px;  border:1px #33CCCC solid;}   
  5. .box2 { float:leftwidth:140pxheight:100px;  border:1px #FF9999 solid;}   
  6. .box3 { width:281pxborder:1px #0099CC solid; }  

HTML代码部分:

XML/HTML Code复制内容到剪贴板
  1. <div class="contain">  
  2.     <div class="box1 center_middle">盒子一</div>  
  3.     <div class="box2 center_middle">盒子二</div>  
  4.     <div class="clear"></div>  
  5.     <div class="box3 center_middle">盒子三</div>  
  6. </div>  

我们预览一下效果:

DIV清除两侧浮动

上例中,我们看到多余了一对标签:<div class="clear"></div>,这一行代码所起的作用就是“清除两侧浮动”,我们知道,盒子一与盒子二都是左浮动(float:left),我们要在盒子一与盒子二下方添加一个盒子三,并且使得盒子三同时出现在盒子一与盒子二的下方,就必须要清除两侧浮动。

事实上,使用DIV+CSS达到上面效果,所需要的代码并不比表格少,甚至还要多,所以当有大量数据需要用表格处理的时候,我们还是建议使用表格布局。不要忘了,表格主要用于数据处理

当页面布局不是很复杂的时候,我们还是建议使用DIV盒子模型来布局。

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号