html - 做轮廓容器的正确方法？

Question

我想做一个在其上部带有一些文本的轮廓容器。如果可以避免的话，我不想使用表格。容器应如下所示：

我可以使用 html5，但只能使用 IE10 的支持集。有什么建议吗？

Answer 1

这个演示应该让你开始。

将容器定位relative和h1定位absolute，使其可以重叠。

Answer 2

您可以使用两种不同的元素来实现这一点。第一个元素将包含在顶部显示为标题的第二个元素。您需要将position第一个元素的 设置为relative，将第二个元素设置为absolute。然后使用left,top或bottom,right定位内部元素。还要确保第二个元素的背景颜色与第一个元素的父元素的背景颜色匹配。

试试这个工作小提琴

示例代码

.main {
    margin-top:20px;
    border: 4px solid #444;
    position:relative;
    padding:10px;
    padding-top:30px
}

.main .title {
    background:white;
    position:absolute;
    top:-25px;
    left:10px;
    padding:5px;
    font-size:26px;
    font-weight:bold;
}

​</p>

Answer 3

这是使用类似的东西fieldset：

<fieldset>

    <legend>Category</legend>    

    <p>CONTENT</p>
    <p>CONTENT</p>
    <p>CONTENT</p>
    <p>CONTENT</p>

</fieldset>

jsFiddle：http: //jsfiddle.net/leniel/scUzR/