0

ヘッダー、フッター、および 2 列のコンテンツを含むレイアウトが必要です。これまでのところ、別のフォーラムでの回答により、http: //jsfiddle.net/bolucpap/FZek3/ (ソース HTML と CSS については以下を参照) にたどり着きました。私が達成したいのは、行数の少ないリスト (この例ではリスト B ですが、動的データは状況が逆であることを意味する場合があります) に、行数の多いリスト (この例ではリスト A) と同じ高さのコンテナーがあることです。例）。また、リストをコンテナーの垂直方向の中央に配置したいと考えています。とにかく、HTML と CSS だけでそれを行うには、JavaScript の使用を妨害する必要がありますか?

HTML:

<div class="headerfooter">
    Header Text
</div>
<div id="container">
    <div id="leftcolumn">
        List A:
        <ul>
            <li>Item A1</li>
            <li>Item A2</li>
            <li>Item A3</li>
            <li>Item A4</li>
        </ul>
    </div>
    <div id="rightcolumn">
        List B:
        <ul>
            <li>Item B1</li>
            <li>Item B2</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
<div class="headerfooter">
    Footer Text
</div>

およびCSS:

#leftcolumn {
    height: 100%;
    width: 50%;
    border: 1px solid red;
    float: left;
    margin-left: -2px
}
#rightcolumn {
    height: 100%;
    width: 50%;
    border: 1px solid red;
    float: right;
    margin-right: -2px
}
.clear {
    clear: both;
}
#container {
    border: 1px solid blue;
}
.headerfooter {
    border: 1px solid green;
}
4

2 に答える 2

2

テーブルを作成しませんか？サポートが必要な場合は、display: table および display: table-cell の代わりに table および td タグを使用してください。

ここでの box-sizing は、ボーダーがコンテナーの幅の一部としてカウントされるために必要です。しかし、あなたはそれなしで行くことができます

div {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#container {
    display: table;
    width: 100%;
    border: 1px solid blue;
}
#leftcolumn {
    display: table-cell;
    width: 50%;
    border: 1px solid red;
    vertical-align: middle;
}
#rightcolumn {
    display: table-cell;
    width: 50%;
    border: 1px solid red;
    vertical-align: middle;
}
于 2013-10-12T12:39:52.153 に答える