学习网页制作：像table一样布局div II

2022-07-15 80酷酷网 80kuku.com

　　网页

下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Equal height boxes with CSS, part II </title> <style type="text/css" media="screen,print"> /* Layout rules */ .equal { display:table; border-collapse:separate; } .row { display:table-row; } .row div { display:table-cell; } /* Styling rules to make the example look nicer */ html,body { margin:0; padding:0; color:#000; background:#fff; } body { font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; } .equal { margin:10px auto; border-spacing:10px; background:#898B60; width:600px; } .row div { background:#fff; } .row .one { width:200px; } .row .two { width:200px; } .row .three { vertical-align:middle; } .row div h2 { margin:0 0 0.5em 0; padding:0.5em 10px; font-size:1.2em; color:#fff; background:#595B30; } .row div p { font-size:0.94em; margin:0.5em 0; padding:0 10px; } #labfooter { text-align:center; clear:both; } </style></head><body><div class="equal"> <div class="row"> <div class="one"> <h2>This is a box</h2> 这个容器含有较少的内容，但是他的高低却能和较多内容的容器等高</div> <div class="two"> <h2>This is another box</h2> <p>这个盒子含有比另外一个更多的内容. 如果所有的容易都作为单元格显示, 那么它的高度将是所有容易的高度. 它现在想表格一样显示, 但是他不是一个表格.</p> <p>另外, display:table, display:table-row and display:table-cell 使的div显示出像表格一样的效果，可是糟糕的是他不能正常运行在你所熟悉的浏览器IE上,但是它却可以顺利运行于像 Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape.这些浏览器上面.然后IE得到供选择CSS，规则防止它完全地毁坏这种布局。</p> <p>了解更多细节: <a href="http://www.jluvip.com/blog/article.asp?id=149">Equal height boxes with CSS</a>.</p> </div> <div class="three"> <p>这也是个含有较少内容的容器.而且内容是垂直居中显示的</p> </div>  </div></div><div id="labfooter"> <a href="http://www.jluvip.com">My blog</a> | 这个翻译的页面版权归greengnn所有，转载请注明出处</div></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Equal height boxes with CSS </title> <style type="text/css" media="screen,print"> /* Layout rules */ .equal { display:table; border-collapse:separate; } .row { display:table-row; } .row div { display:table-cell; } /* Styling rules to make the example look nicer */ html,body { margin:0; padding:0; color:#000; background:#fff; } body { font:90%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; } .equal { margin:10px auto; border-spacing:10px; background:#898B60; width:80%; } .row div { background:#fff; } .row div.one { width:40%; } .row div.two { width:40%; } .row div.three { vertical-align:middle; } .row div h2 { margin:0 0 0.5em 0; padding:0.5em 10px; font-size:1.2em; color:#fff; background:#595B30; } .row div p { font-size:0.94em; margin:0.5em 0; padding:0 10px; } #labfooter { text-align:center; } </style></head><body><div class="equal"> <div class="row"> <div class="one"> <h2>This is a box</h2> <p>这个容器含有较少的内容，但是他的高低却能和较多内容的容器等高</p> </div> <div class="two"> <h2>This is another box</h2> <p>这个盒子含有比另外一个更多的内容. 如果所有的容易都作为单元格显示, 那么它的高度将是所有容易的高度. 它现在想表格一样显示, 但是他不是一个表格.</p> <p>另外, display:table, display:table-row and display:table-cell 使的div显示出像表格一样的效果，可是糟糕的是他不能正常运行在你所熟悉的浏览器IE上,但是它却可以顺利运行于像 Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape.这些浏览器上面</p> <p>了解更多细节: <a href="http://www.jluvip.com/blog/article.asp?id=149">Equal height boxes with CSS</a>.</p> </div> <div class="three"> <p>这也是个含有较少内容的容器.而且内容是垂直居中显示的</p> </div> </div></div><div id="labfooter"> <a href="http://www.jluvip.com">My blog</a> | 这个翻译的页面版权归greengnn所有，转载请注明出处</div></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

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

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