加入城市，听原创电台，写情感文字，分享你的一切。
您需要 登录 才可以下载或查看，没有帐号？注册居民
x
下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个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>
<!-- Some rules to make IE/Win display the boxes with variable height. -->
<!--[if IE]>
<style type="text/css" media="all">
.equal, .row {
display:block;
}
.row {
padding:10px;
}
.row div {
display:block;
float:left;
margin:0;
}
.row .two {
margin-left:10px;
}
.row .three {
width:160px;
float:right;
}
.ieclearer {
float:none;
clear:both;
height:0;
padding:0;
font-size: 2px;
line-height:0;
}
</style>
<![endif]-->
</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>
<!--[if IE]>
<div class="ieclearer"></div>
<![endif]-->
</div>
</div>
</body>
</html>
本文转自www.93you.com,转载请注明出处。
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.93you.com/html/css/">Equal height boxes with CSS</a>.</p>
</div>
<div class="three">
<p>这也是个含有较少内容的容器.而且内容是垂直居中显示的</p>
</div>
</div>
<div class="equal">
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<!--[if IE]>
<div class="ieclearer"></div>
<![endif]-->
</div>
</div>给xhtml增加一个判断，判断是否为IE，然后给IE一个特殊待遇，在IE显示和别的浏览器不同的代码，对于这个判断IE\MAC优先选择显示其间的内容。
然后在CSS中也增加一个判断，配合xhtml,用浮动对齐（浮动对齐就不用解释了）的方式来实现容器的等高并排放置，但是还是无法真实的实现等高，你可以采用添加背景颜色的视觉错觉来实现视觉上的等高，或者采用别的方法，这里就不进行说明了。下面是CSS中的代码
<!--[if IE]>
<style type="text/css" media="all">
.equal, .row {
display:block;
}
.row {
padding:10px;
}
.row div {
display:block;
float:left;
margin:0;
}
.row .two {
margin-left:10px;
}
.row .three {
width:160px;
float:right;
}
.ieclearer {
float:none;
clear:both;
height:0;
padding:0;
font-size: 2px;
line-height:0;
}
</style>
<![endif]-->到此，整个设计真正的完成了，虽然不够完美，对非IE而做出努力显得有点多余，现在要么IE支持第一个模型，要么我们可能会想出更好的方案来。但是这次尝试是有价值的。
|
IP卡
狗仔卡
发表于 2008-2-19 19:52:34
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡