代码之家 › 专栏 › 技术社区 › Sander Marechal

CSS表格单元格布局中的圆角?

css html

Sander Marechal · 技术社区 · 15 年前

我的设计需要帮助。我想显示三个相等的高度彼此相邻的盒子,像这个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上。左上角角在箱头上。右下角在外面箱分区和左下角在箱体上。

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

我怎样才能解决这个问题?所有的方格现在高度相等。我愿意像盒子体一样展开以使用所有可用的高度,即使内容简短。我试过身高:100%,但那不行。我怎么能做那件事吗?

还是有其他方法来实现我想要的?我不能用有点像人造列,因为我定义了框的宽度 EMS。这意味着我不能给box div一个单一的背景图像提供两个底角。

谷歌在这里毫无用处。任何涉及“转角”的查询 “Table”只是给了我一个1990年教程的链接用于圆角的3x3桌子。

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

任何小费都非常感谢!

6 回复 | 直到 12 年前

Sander Marechal 15 年前

根据我上面的评论,我决定使用CSS3边界半径来解决我的问题。使用下面的语句,它将在除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,并减少了我需要的背景图像的数量和大小。

samuil 15 年前

有解决方案,在 Safari , Firefox 和 Chrome . 它不适用于IE,也不适用于 Opera (就我所测试的而言,即使在10.0亿年内也没有)。它使用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;
}

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

Jason 15 年前

如果您不介意添加一些额外的标记,您可以实现这个效果。当然,我并不真正提倡代码膨胀,但是如果你必须完成它,你可以双重包装盒,并让底角在每个包装器中的一个。用 display: table-cell 你应该是金的。

beggs 15 年前

你能用吗? min-height Box Body元素的属性?

-1

Mauro 15 年前

尝试将盒体设置为 显示:表格单元格 ?这可能会迫使它将三个长方体渲染到相同的高度,并将圆角边界强制到底部。

-2

Siddharth Rout 12 年前

我希望这对你有帮助(我是这些论坛发帖的新手) 作为一个图形设计师,HTML的“方正性”是可怕的。我知道这不是一个真正的HTML或CSS修复,因为它是一个简单的图形解决方案。但它的效果很好,因为它是一个简单的GIF图像,所以它不会在浏览器中失败。缺点是,由于尝试和错误,需要时间,如果更改单元格中的内容量,则可能需要更改用作圆角矩形背景的图像。

所以,有了这个警告…

通过添加文本和测量单元格,或者查看图像大小(如果只有图像),计算出所需表格单元格的大小(以像素为单位)。

在一个图形程序中,创建一个任意颜色的矩形(如果网站上有白色文本,请说黑色等)。这个矩形是底层。

创建一个圆角矩形,例如,线条粗细为1像素,没有填充颜色(线条颜色可以是您选择的任何颜色,也可以是粗细..),它位于基本填充矩形的上方。然后你将拥有一个纯色的正方形,有一个带有圆角的细轮廓。

我把圆形的未填充矩形缩小10个像素(x-y),然后我可以在正方形上等距放置它。

导出此图像,如GIF或JPEG。

在您的网站上,在页面上单击希望圆角矩形所在的表格单元格,并将其设置为该单元格的背景图像。确保单元格与图像大小相同,否则将不适合或平铺… 然后,因为它是一个单元格的背景元素,所以您放入单元格中的任何内容、文本或图像都将显示在背景图像的上方,使其看起来像是一个圆形的表格单元格。

如果您希望通过将本机图像导出为具有透明度的GIF使背景图像透明,可以(您可以使用具有更多颜色的ALHPA透明度的PNG,但我还不确定是否完全支持网页中的PNG图像) 只需选择基本的纯色背景色,比如黑色,并添加为透明色。

如果您有一个背景图像使用CSS来显示整个页面,您可能需要透明度,但需要注意的是,根据所使用的图像,这可能会使文本的阅读变得困难。

我希望这能有所帮助。