[翻译]像table一样布局div[2]

greengnn 楼主

1. 翻译自：Equal height boxes with CSS part II
   
2. 原文：http://www.456bereastreet.com/archive/200406/equal_height_boxes_with_css_part_ii/
   
3. 这个翻译的页面版权所有，授权蓝色。转载请注明出处。
   
4. 下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧

复制代码

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

xhtml结构类似第一个模型的只是增加一个新的div给IE

1. <div class="equal">
   
2.     <div class="row">
   
3.         <div class="one"></div>
   
4.         <div class="two"></div>
   
5.         <div class="three"></div>
   
6.         <!--[if IE]>
   
7.         <div class="ieclearer"></div>
   
8.         <![endif]-->
   
9.     </div>
   
10. </div>

复制代码

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

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

1. <!--[if IE]>
   
2.         <style type="text/css" media="all">
   
3. .equal, .row {
   
4.         display:block;
   
5. }
   
6. .row {
   
7.         padding:10px;
   
8. }
   
9. .row div {
   
10.         display:block;
    
11.         float:left;
    
12.         margin:0;
    
13. }
    
14. .row .two {
    
15.         margin-left:10px;
    
16. }
    
17. .row .three {
    
18.         width:160px;
    
19.         float:right;
    
20. }
    
21. .ieclearer {
    
22.         float:none;
    
23.         clear:both;
    
24.         height:0;
    
25.         padding:0;
    
26.         font-size: 2px;
    
27.         line-height:0;
    
28. }
    
29.         </style>
    
30. <![endif]-->

复制代码

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

[ 本帖最后由 blankzheng 于 2007-4-15 22:34 编辑 ]

ruxpinsp1

……相当于给 IE 单独写 CSS
个人认为在IE全面支持 display: table 之前，这种应用还是空谈

daozi2

有疑问
css如此强大的功能，根本不需要想table一样布局，
任何布局css都能实现。
为什么这里还要把div搞的像table一样布局
有点多事了

k236740

很不幸的~
老外就是喜歡專門研究這類你們認為空談與多事的技術~
所以他們能懂得比你們多~(大部分啦)

更不幸的是~我也是那種人~
所以我可以很輕鬆的兼容目前所有的主流瀏覽器~
包括IE5.0那種古董級的老爺瀏覽器~

敞開胸懷吧朋友~
如果願意拋開成見~
你們或大家都會學到更多的~

Aether

3楼和4楼的同学们，你们把去年2月份的帖子翻出来，有什么特别的用意吗？……

zhangjiewx

这篇文章有一定的使用价值

mallee

个人认为还是DIV和TABLE一起用比较好！

webdesigning

W3C并没说禁止使用TABLE吧
看情况使用