网页设计：像table一样布局div

来源:greengnn博客时间:07-04-19 点击: 点击这里收藏本文

下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个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.jzxue.com/html/css/">Equal height boxes with CSS</a>.</p> </div> <div class="three"> <p>这也是个含有较少内容的容器.而且内容是垂直居中显示的</p> </div>  </div> </div> <div id="labfooter"> <a href="http://www.jzxue.com/html/buju/">网页布局</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.jzxue.com/html/css/">Equal height boxes with CSS</a>.</p> </div> <div class="three"> <p>这也是个含有较少内容的容器.而且内容是垂直居中显示的</p> </div> </div> </div> <div id="labfooter"> <a href="http://www.jzxue.com/html/buju/">网页布局</a> | 这个翻译的页面版权归greengnn所有，转载请注明出处 </div> </body> </html>

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

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

9 7 3 1 2 4 8 :

把此文章收藏到：　　　　　

相关教程

广而告之

文章搜索

Google JZxue.Com

最新文章

网站推广—网站建设的关键课

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

推荐导读

优秀个人网站打造全过程

热门排行

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册