html - HTML 3 列ヘッダー

Question

水平方向に 3 つの部分に分割された固定ヘッダーを作成しようとしています。中央部分は 1000px の幅で、他の 2 つの部分は自動幅で同じサイズです。また、左側の部分には、中央部分にエッジが接着されたイメージがあります。私はいくつかの解決策を試しましたが、テーブルを使用してのみこれを達成しました。誰でもこれで私を助けることができますか？

Answer 1

テーブルセルとして表示されるdivを使用してそれを行うことができます。

HTML:

<div class="header">
    <div class="l">l</div>
    <div class="m">m</div>
    <div class="r">r</div>
</div>

CSS:

.header {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.header > div {
    display: table-cell;
}
.l {
    background: lightblue;
}
.m {
    background: lightgreen;
    width: 500px;
}
.r {
    background: lightblue;
}

デモもチェックしてください。

Answer 2

テーブルまたは div で行うことができますが、柔軟性と一貫性のために、div で行うことをお勧めします。

テーブル：

<table width="1200" height="100">
    <tbody>
    <tr>
        <td></td>
        <td width="1000"></td>
        <td></td>
    </tr>
    </tbody>
</table>

区分:

ここに移動します。中央の div は大きなもので、サイド div はその他のものです。クリア div を削除しないでください。これは、html のフロート修正にすぎません。必要に応じて CSS を変更するだけです。

http://jsfiddle.net/EsQak/