html - 輪郭を描かれたコンテナを行う正しい方法は?

Question

上部にテキストを含むアウトライン コンテナーを作成したいと考えています。テーブルを避けることができれば、テーブルを使用したくありません。コンテナは次のようになります。

html5 を使用できますが、IE10 でサポートされているセットのみです。何かアドバイス？

Answer 1

このDEMOから始めることができます。

コンテナーを配置しrelative、重ねられるように配置します。h1absolute

Answer 2

これは、2 つの異なる要素を使用して実現できます。最初の要素には、上部にタイトルとして表示される 2 番目の要素が含まれます。position最初の要素の をrelativeに、2 番目の要素をに設定する必要がありますabsolute。次にleft、topまたはbottomを使用rightして内側の要素を配置します。また、2 番目の要素の背景色が最初の要素の親要素の背景色と一致していることを確認してください。

この動作する 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;
}

</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/