CSS:在多个对象周围创建边框

Question

我试图在多个不同大小的对象周围显示一个css边框。下图显示了我想要实现的目标：(蓝色方块=span，绿色方块=div，灰色边框是我想要的(

图片

到目前为止，我所尝试的是只为span元素绘制顶部、左侧和右侧边界，然后为div绘制整个边界。然后让它们以负边距重叠。

然而，这不是一个很好的解决方案，因为它在不同的变焦阶段并不总是匹配的。。

有更好的方法吗？

Answer 1

您可以使用表格和花式边框。

HTML:

<table cellspacing="0" style="width: 100%">
<tr>
<td class="header"><span>Test</span></td>
<td class="space"></td>
</tr>
<tr>
<td class="content" colspan="2">
Test content
</td>
</tr>
</table>

CSS：

.header {
width:1%;
white-space:nowrap;
border: 1px solid black;
border-bottom: 0;
}
.space {
border-bottom: 1px solid black;
}
.content {
border: 1px solid black;
border-top: 0;
}

http://jsfiddle.net/ao4hbt2q/11/应该不言自明。只需确保将表格的单元格间距设置为0，并将"span"单元格设置为内容的宽度即可。

编辑：如果你正在读这篇文章，你可能是一个反对创建表格的人。表是HTML中一个使用率非常低且非常重要的部分。在引导程序和花哨框架的时代，它们似乎"过时了"，但它们往往是定位问题的最佳解决方案！

Answer 2

您可以使用CSS指定容器的哪些边接收边框。因此，对于您的示例，您可以尝试以下操作：

span { 
border-top:    5px solid grey;
border-right:  5px solid grey; 
border-left:   5px solid grey;
}
div { 
border-right:  5px solid grey; 
border-bottom: 5px solid grey;
border-left:   5px solid grey;
}

这可以缩短为这样的东西：

span {
border:        5px solid grey
border-bottom: 0
}
div {
border:        5px solid grey
border-top:    0
}