Html 做一个有轮廓的容器的正确方法？

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

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

这会让你开始学习

---

将容器放置在

相对位置

和

h1位置

绝对位置以便可以重叠。

下面是使用

字段集

的类似内容：

<fieldset>

    <legend>Category</legend>    

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

</fieldset>

类别
内容

内容

内容

内容

---

jsiddle:

您可以使用两个不同的元素来实现这一点。第一个元素将包含在顶部显示为标题的第二个元素。您需要将第一个元素的

位置设置为
相对
，将第二个元素设置为
绝对
。然后使用
左
，
上
或
下
，
右
定位内部元件。还要确保第二个元素的背景色与第一个元素的父元素的背景色匹配

示例代码
​
 你试过什么了吗？有一些代码吗？我有一个非常难看和冗长的，有表格。我正在寻找更好的方法和元素来帮助您。@elias94xx不知道它们。他们是完美的工作！正如@cimmanon所述，leyend和fieldset用于表单分组。我没有使用表单，所以选择的答案更符合html。字段集应该只用于对表单控件进行分组，而不是因为您喜欢它的外观。depot的回答用其他元素重新创建了字段集/图例的外观。因为我不使用表单，而字段集和图例用于表单。你的答案肯定是HTML兼容的。谢谢，先生
.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;
}