像Table一样对层DIV进行轻松布局

• 　　许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。
  但是你又不喜欢用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经过测试均可以完美显示.

  （出处：http://www.hackhome.com/）

• 复制本页网址和标题，发送给你QQ/Msn的好友一起分享
  
  
• 像Table一样对层DIV进行轻松布局 相关文章：
• ·从头到尾教你组建小型局域网
• ·局域网常用的DOS查询IP地址命令
• ·如何实现局域网打印机共享
• ·求助:如何知道自己是否被人限制局域网内网速!
• ·如何进行局域网设置
• ·局域网内共享文件 提示没有访问权限的问题
• ·大型企业局域网安全解决方案(1)
• ·校园网局域网组网方案剖析
• ·局域网连接设备--局域网知识
• ·关于局域网限制网速的问题
• 像Table一样对层DIV进行轻松布局 相关软件
• ·《新仙剑奇侠传》凄美结局动画
• ·局域网共享设置梦想吧专用版
• ·《霸王阴功》完美结局补丁 无敌初始存档
• ·《风色幻想3》完美结局存档
• ·《幻世录2》完美结局存档
• ·《新绝代双娇3》所有完美结局
• ·《楚留香新传》结局存档
• ·局域网超级工具 NetSuper V3.0
• ·《波斯王子2》双结局完美存档
• ·《天龙八部》完美结局存档

上一篇:Google流量超雅虎成全球第一大站

下一篇:清凉之夏 3DS MAX制作奶油冰激凌

• 特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
• 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
• 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

精品推荐

热点TOP10

特别推荐