html - css 表格单元格布局中的圆 Angular ？

Question

我的设计需要一些帮助。我想显示三个等高 彼此相邻的框，就像这个 ASCI 艺术:

+------+ +------+ +------+
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ +------+ +------+

我还有an example online (with all the CSS) .

盒子里的东西高度不同。棘手的是 这些盒子还需要有圆 Angular 。为此，我正在使用 “滑动门”技术。基本上，盒子的标记是一些东西 像这样:

<div class="box">
  <div class="box-header">
    <h4>header</h4>
  </div>
  <div class="box-body">
    <p>Contents</p>
  </div>
</div>

四个 block 元素，所以我可以制作圆 Angular 和边框 背景图像。右上角是 h4。左上角 Angular 落在盒子标题上。右下角在外面 box div 和左下角放在 box-body 上。

我正在使用 CSS display:table-cell 使所有三个框都相等 高度，但我的问题从这里开始。所有的盒子元素现在都是 等高，但盒体元素的高度不等，因为 内容不等高。结果:右下角 位置不正确。另请参阅我发布的链接。

我该如何解决？现在所有框 div 的高度都相等。我会 像 box-body 扩展以使用所有可用的高度，即使 内容很短。我尝试了 height:100% 但这不起作用。我怎样才能 做那个工作？

或者有其他方法可以实现我想要的吗？我不能使用 类似人造列的东西，因为我定义了盒子的宽度 ems。这意味着我不能给盒子 div 一个单一的背景图像 提供两个底 Angular 。

谷歌在这里完全没用。任何涉及“Angular ”的查询 而“表格”只是给了我 1990 年代使用的教程的大量链接 一个 3x3 的圆 Angular table 。

至于浏览器兼容性，如果 IE7/8 也能处理它就好了，但这不是必需的(在这种情况下我可以用不等高的 float 替换)。对于我正在开发的网站，我估计 IE 的市场份额为 20% 或更少。我根本不关心 IE6。

非常感谢任何提示!

Answer 1

根据我上面的评论，我决定使用 CSS3 border-radius 来解决我的问题。使用下面的语句，它将在除 Internet Explorer 之外的所有浏览器上显示圆 Angular 边框。我不太关心 IE，所以 IE 用户可以简单地看直 Angular 。

.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，并减少了我需要的背景图像的数量和大小。