正确的方式做一个概述的容器？

Question

我想做一个概述的容器，其上部有一些文字。如果可以避免使用表格，我不想使用表格。容器应如下所示：

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

Answer 1

此DEMO应该可以帮助您入门。

让容器位于relative，h1位于absolute位置，以便重叠。

Answer 2

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

Try out this working Fiddle

示例代码

.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;
}

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/