css合理布局案例:网页页面合理布局的方式

　　很多网页页面设计方案师都喜爱，将两个或好几个器皿等高的并排置放，并在里边展现每一个器皿的內容，就象經典报表合理布局中的模块格操纵几个栏目地部位，也喜爱器皿的內容垂直居中或顶部对齐显示信息。
　　可是你又不喜爱用table来完成他，那如何办呢？完成的方式许多，有依据视觉效果幻觉完成的，有效JS操纵使高宽比相同的，也有选用器皿外溢一部分掩藏和列的负底界限和正的内补钉相融合的方式来处理列高宽比同样的难题。
　　实际上有个简易的方式，应用display:table, display:table-row and display:table-cell 便可以完成，并且高宽比小的器皿会自融入那些高宽比相对性较高的，可是IE不适用这个特性，大家先无需去责怪IE，坚信之后会有一定的改进的。这里我制做了1个实体模型。
先看看xhtml的构造：
＜div class="equal"＞
＜div class="row"＞
＜div class="one"＞＜/div＞
＜div class="two"＞＜/div＞
＜div class="three"＞＜/div＞
＜/div＞
＜/div＞
　　很简易无需解释就可以看懂，可是这里得出1个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显示信息，也便是将他做为1个报表
　　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历经检测都可以完善显示信息.
点一下这里收看本站的网页页面制做频道。