网站首页  注册会员  本站免费电影 留言板  繁體中文

 

您现在的位置: 陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文
 

   
专 题 栏 目
相 关 文 章

手机QQ2009(Java)Beta1 
WinRAR 3.90 Beta 4 烈火
简单方便随心 ABPlayer2
360安全卫士5.2beta3版 
妙用ABPlayer 淘票和影视
宅人新视听!用ABPlayer
QQ旋风2 Beta 4,让下载
QQ旋风2beta2发布 清爽下
想唱就唱:用ABPlayer尽
QQ2009 Beta 1 第一时间

 
像Table一样对层DIV进行轻松布局           
像Table一样对层DIV进行轻松布局
作者:陈鹏 文章来源:eNet 点击数: 更新时间:2009-9-12 8:46:34
 




 

许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。
但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

  其实有个简单的方法,使用display:table, display:table-row and display:table-cell 就可以实现,而且高度小的容器会自适应那些高度相对较高的,但是IE不支持这个属性,我们先不用去责备IE,相信以后会有所改善的。这里我制作了一个模型。

先看看xhtml的结构:

<div class="equal">
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>

  很简单不用解释就能看懂,但是这里给出一个table的结构,是不是很相似

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table> 


 下来是css:

.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .three {

}

  解释:

  1.dispaly:table;让层.equal作为块级元素的表格table显示,也就是将他作为一个表格
  2.border-collapse:separate;边框独立,就像表格没有合并单元格以前
  3.display:table-row;将.row作为表格行tr显示
  4.display:table-cell;将.row的下级div作为表格单元格td显示
  5.然后定义宽度
 
  这里还使用了 border-spacing:10px;来区别几个盒子,正如上面所陈述的,IE下不能正常显示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1经过测试均可以完美显示.

热门推荐 Linux系统网络服务器配置基础 瑞星杀毒2008半年免费

文章录入:陈鹏    责任编辑:陈鹏 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
     
     
     
     
     

    Copyright © 2007 - 2009 chenpeng123.com All Rights Reserved
    本站所有文章,软件等均来自网络收集,不代表本站观点,仅供学习和研究使用。如有侵犯您的版权,请联系我们,本站将立即删除。
    鲁ICP备07014697号
    你是本站第 位访客