我的设计需要一些帮助.我想要显示三个相等高度的盒子,就像这个ASCI艺术:
+------+ +------+ +------+
| | | | | |
| | | | | |
| | | | | |
+------+ +------+ +------+
我也有一个在线示例(使用所有CSS).
盒子的内容高度不同.棘手的是这些盒子也需要圆角.为此,我使用"推拉门"技术.基本上,盒子的标记是这样的:
<div class="box">
<div class="box-header">
<h4>header</h4>
</div>
<div class="box-body">
<p>Contents</p>
</div>
</div>
四个块元素,所以我可以使用背景图像制作圆角和边框.右上角是h4.左上角位于框标题上.右下角在外框div上,左下角在盒体上.
我正在使用CSS显示:table-cell使所有三个盒子的高度相等,但这里我的问题开始了.现在所有的盒子元素都具有相同的高度,但是盒体元素的高度不同,因为内容的高度不同.结果:右下角未处于正确位置.另见我发布的链接.
我该如何解决这个问题？现在所有盒子div的高度相等.我希望盒体扩展到使用所有可用的高度,即使内容很短.我试过身高:100%,但这不起作用.我怎样才能做到这一点？
还是有另一种方法来实现我想要的东西？我不能使用像faux这样的东西,因为我在ems中定义了框的宽度.这意味着我不能给盒子div提供一个提供两个底角的背景图像.
谷歌在这里绝对没用.任何涉及"角落"和"桌子"的查询都只是给了我一个与1990年教程相关的大量链接,这些教程使用3x3桌子作圆角.
至于浏览器兼容性,如果IE7/8也可以处理它会很好但是不需要(在这种情况下我可以替换为不等高度的浮点数).对于我正在开发的网站,我估计IE市场份额为20%或更低.我根本不关心IE6.
任何提示都非常感谢!
根据我上面的评论，我决定使用 CSS3 border-radius 来解决我的问题。使用下面的语句，它将在除 Internet Explorer 之外的每个浏览器上显示圆角边框。我不太关心 IE，所以 IE 用户可以简单地看直角。
.box {
display: table-cell;
width: 16em;
padding: 1em 2em;
background: #f6c75d url(gradient.png) repeat-x scroll top left;
border: 3px solid #de9542;
border-radius: 25px; /* Standard */
-o-border-radius: 25px; /* Opera 10.x */
-moz-border-radius: 25px; /* Mozilla/Firefox */
-icab-border-radius: 25px; /* iCab */
-khtml-border-radius: 25px; /* KHTML/Konqueror */
-webkit-border-radius: 25px; /* Webkit/Safari/Chrome/etcetera */
}
在上面，gradient.png 是一个小的可平铺图像，在框的顶部提供渐变。
它工作完美。它还简化了标记和 CSS，并减少了我需要的背景图像的数量和大小。