网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

作者： 北京网站建设   日期：2008-03-27 06:14:05  来源： http://www.qitongnet.com

　　许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。 中.国.站.长.站

北京网页设计
　　但是你又不喜欢用table来实现他，那怎么办呢？实现的方法很多，有根据视觉错觉实现的，有用JS控制使高度相等的，还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

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

北京网页设计
　　先看看xhtml的结构： Www^Chinaz^com

以下为引用的内容：网页设计 <div class="equal">北京网站建设     <div class="row">网站建设         <div class="one"></div>北京网站设计         <div class="two"></div>网站设计         <div class="three"></div>网站建设     </div>北京网页设计 </div>

站.长.站

 

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

以下为引用的内容：网站建设 <table>网站制作  <tr>北京网站设计   <td></td>网站制作   <td></td>北京网站建设   <td></td>网站建设  </tr>北京网页设计 </table>

Www_Chinaz_com

  中.国.站.长.站

　　下来是css： Www_Chinaz_com

以下为引用的内容：北京网站设计  .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 {网页设计   网站建设  }

站.长.站

  Chinaz^com

　　解释： Www^Chinaz^com

网站设计
　　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经过测试均可以完美显示。

站长.站

 

Www_Chinaz_com

　　上面的问题就是，这个模型对IE来说等同于垃圾，所以基本只能是做来玩玩而已，没有什么实际的用处，现在我要做的就是，让它也能在IE下更好的显示,所以我又做了第二个模型。 Chinaz^com

网站设计
　　xhtml结构类似第一个模型 的只是增加一个新的div给IE。 Chinaz~com

网站设计

以下为引用的内容：网站建设 <div class="equal">北京网站建设     <div class="row">网页设计         <div class="one"></div>北京网站建设         <div class="two"></div>北京网站制作         <div class="three"></div>企通互联         <!--[if IE]>网页设计         <div class="ieclearer"></div>网页设计         <![endif]--> 站长.站 北京网站设计     </div>北京网页设计 </div>

Www^Chinaz^com

  Chinaz

　　给xhtml增加一个判断，判断是否为IE，然后给IE一个特殊待遇，在IE显示和别的浏览器不同的代码，对于这个判断IE\MAC优先选择显示其间的内容。 网站制作中国站.长站

网站制作
　　然后在CSS中也增加一个判断，配合xhtml,用浮动对齐（浮动对齐就不用解释了）的方式来实现容器的等高并排放置，但是还是无法真实的实现等高，你可以采用添加背景颜色的视觉错觉来实现视觉上的等高，或者采用别的方法，这里就不进行说明了。 北京网站制作

北京网页设计
　　下面是CSS中的代码 中国站长.站

北京网站设计

以下为引用的内容：北京网页设计 <!--[if IE]>网站建设     <style type="text/css" media="all">企通互联 .equal, .row {企通互联     display:block;北京网站制作 }北京网页设计 .row {网站建设     padding:10px;企通互联 }北京网站建设 .row div { 北京网站设计企通互联     display:block; 企通互联北京网站设计     float:left;北京网站建设     margin:0;北京网站制作 }北京网站设计 .row .two {网页设计     margin-left:10px;网页设计 }北京网页设计 .row .three {北京网站设计     width:160px;企通互联     float:right;北京网站建设 }网站设计 .ieclearer {北京网站设计     float:none;网站制作     clear:both; Chinaz^com 北京网站制作     height:0;北京网站制作     padding:0;北京网站设计     font-size: 2px;网站制作     line-height:0;网站制作 }网站制作     </style>网站设计 <![endif]-->

中国站长_站, 网页设计为中文网站提供动力

  站.长站

　　到此，整个设计真正的完成了，虽然不够完美，对非IE而做出努力显得有点多余，现在要么IE支持第一个模型，要么我们可能会想出更好的方案来。但是这次尝试是有价值的。

网页设计 北京网页设计

字体：【大】【中】【小】

这是一个与众不同的品牌，企通互联只专注于网站建设领域！中小型企业网站建设最佳合作伙伴！网站建设咨询热线：010-65587978/77/76/75!