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

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

　　下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个 北京网站建设CSS技巧。许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。

中国站.长站

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

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

　　先看看xhtml的结构：

　　<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：

　　.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

　　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经过测试均可以完美显示.

　　至此整个任务就结束了。 网站建设站长.站

北京网站建设

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

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