Question

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

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

我也有an example online (with all the CSS)。

盒子的内容高度不一。棘手的是这些盒子也需要有圆角。为此，我正在使用 “推拉门”技术。基本上，盒子的标记是一种东西像这样：

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

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

我正在使用CSS显示：table-cell使所有三个盒子相等身高，但这里我的问题开始了。现在所有的盒子元素都是相同的高度，但盒体元素的高度不相同，因为内容高度不一样。结果：右下角不在正确的位置。另见我发布的链接。

我该如何解决？现在所有盒子div的高度相等。我会像盒子一样扩展使用所有可用的高度，即使是内容很短。我试过身高：100％，但这不起作用。我怎么能够让那工作？

或者有没有其他方法可以达到我的目的？我不能用类似于人造柱的东西，因为我定义了盒子的宽度 EMS。这意味着我不能给盒子div一个单一的背景图像提供两个底角。

Google在这里绝对没用。任何涉及“角落”的查询而“table”只是给了我一个与1990年使用的教程相关的大量链接一个3x3的圆角桌子。

至于浏览器兼容性，如果IE7 / 8也可以处理它会很好但是不需要（在这种情况下我可以替换为不等高度的浮点数）。对于我正在开发的网站，我估计IE市场份额为20％或更低。我根本不关心IE6。

非常感谢任何提示！

Answer 1

根据我上面的评论，我决定使用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是一个小的tileable图像，它在框顶部提供渐变。

完美无缺。它还简化了标记和CSS，并减少了我需要的背景图像的数量和大小。

Answer 2

有解决方案，适用于Safari，Firefox和Chrome。它在IE中不起作用，也不在Opera中（据我测试过它 - 甚至在10.0b中都没有）。它使用CSS3属性border-image。由于它仍然包含在工作草案中，而不是推荐中，因此浏览器仅使用其特定前缀实现它：

#boxes {
    display: table;
    border-spacing: 1em;
}
.box-row { display: table-row; }
.box {
    width: 16em;
    display: table-cell;
    padding-right: 2em;
    border-image: url(box.png) 6 8 6 8 stretch; // this line actually does not influence rendering in any engine
    -o-border-image: url(box.png) 6 8 6 8 stretch;
    -khtml-border-image: url(box.png) 6 8 6 8 stretch;
    -icab-border-image: url(box.png) 6 8 6 8 stretch;
    -webkit-border-image: url(box.png) 6 8 6 8 stretch;
}

使用它实际上需要你重新创建背景图像，但它是一个细节。

Answer 3

如果您不介意添加一些额外的标记，您可以实现此效果。当然我并不是真的提倡代码膨胀，但是如果你必须完成它，你可以双重包装盒子并让每个包装器的底角都有。用display: table-cell设置内包装的高度，你应该是金色的。

Answer 4

您可以在box-body元素上使用min-height属性吗？

Answer 5

尝试将框体设置为 display：table-cell ？可能会强制它将三个盒体渲染到相同的高度，并将圆形边框强制到底部。

Answer 6

我希望这能得到你（我是这些论坛发布的新手）作为一名平面设计师，HTML的“方形”非常糟糕。我知道这不是HTML或CSS的真正修复，因为它是一个简单的图形解决方案。但它效果很好，因为它是一个简单的GIF图像，它不会在浏览器中失败。缺点是由于试验和错误需要时间，如果您更改单元格中的内容量，您可能需要更改用作圆角矩形背景的图像。

所以，有了这个警告......

通过添加文本和测量单元格来计算所需表格单元格的大小，或者只查看图像时查看图像大小（以像素为单位）。

在图形程序中创建任意颜色的矩形（如果网站上有白色文字等，则说黑色）这个矩形是底层。

创建一个圆角矩形，例如，1像素线条粗细和无填充颜色（线条颜色可以是您选择的任何颜色，可以是厚度..），它位于基本填充矩形之上。那么你将拥有一个纯色方形，带有圆角的薄轮廓。

我将圆形的未填充矩形缩小了10个像素（x-y），然后我可以将它定位在正方形上方等距离。

导出此图片，例如GIF或JPEG格式。

在您的网站中，在页面上单击您想要圆角矩形的表格单元格，并将其设置为该单元格的BACKGROUND图像。确保单元格与图像尺寸相同或不适合或平铺... 然后，因为它是单元格的BACKGROUND元素，所以放在单元格中的任何内容，文本或图像都将显示在背景图像上方，使其看起来像是有一个ROUNDED表格单元格。

如果你想通过将原生图像导出为具有透明度的gif，可以使背景图像透明（你可以使用具有更多颜色的Alhpa透明度的PNG，但我不太确定PNG图像的完全浏览器支持在网页中）只需选择基本的纯色背景颜色，比如黑色，然后将其添加为透明色。

如果您有一个使用CSS的背景图片，您可能需要透明度，但是，请注意，根据使用的图像，它可能会使文本的阅读变得困难。

我希望这有帮助。

css表单格布局中的圆角？

6 个答案: