css布局实例:网页布局的方法

• 　　许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。
  
  　　但是你又不喜欢用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的好友一起分享
  
  
• css布局实例:网页布局的方法 相关文章：
• ·ADSL猫 路由设置方法
• ·盗QQ号码方法大全
• ·QQ空间开场动画免费拿的方法
• ·20款最流行猫ADSL MODEM路由设置方法
• ·查找对方IP地址的一些方法
• ·解决ActiveX部件不能创建对象的有效方法
• ·qq空间皮肤背景代码：QQ空间不用Q币更换主页皮肤方法
• ·显示器工厂模式的进入方法集锦
• ·万能声卡驱动（Alsa）的安装方法
• ·FLASH 8实例教程：瀑布动画制作方法
• css布局实例:网页布局的方法 相关软件
• ·三国9普通版升级威力加强版方法以及补丁大全（极力推荐）
• ·东方法律宝典 V2007 版
• ·学习方法宝典 V2007
• ·《东方法律宝典》--常用法律法规汇编
• ·PDF电子书简要制作方法
• ·网站推广29种常用方法
• ·vc++6编程方法

上一篇:娃娃不哭-为512地震中逝去的母亲

下一篇:点亮爱心 腾迅QQ将推出爱墙图标

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

精品推荐

热点TOP10

特别推荐