1

DIV の高さに問題があります。写真を見てください。2 つの div タグがあり、div-1 には黒色の右側の境界線があります。div-1 と div-2 の高さが設定されていません。コンテンツとともに増加するときにこれらの div の高さのいずれかが必要であり、2 つの div タグ間の境界線が自動的に増加し、常に画像のようになります。テーブルを使用した場合は、その問題じゃない。しかし、divタグを使用すると、どうすればこれが可能になりますか?

ここに画像の説明を入力

-ありがとう。

4

1 に答える 1

1

IE7 を気にしない場合はdisplay: table-cell、レイアウトをまっすぐにするために使用できます。両方の要素がまったく同じ高さになるように強制するため、境界線は常に黒い底に当たります。

div.page {
    display: table;
    width: 500px;
}
div.page > section {
    display: table-cell;
    width: 70%;
    vertical-align: top;
    border-right: 1px solid #ccc;
}
div.page > aside {
    display: table-cell;
    width: 30%;
    vertical-align: top;
}

HTML

<div class="page">
    <section>Left</section>
    <aside>Left</aside>
</div>

デモ

http://jsfiddle.net/VEzUG/

もちろん、と<div>の代わりに s を使用できます。<section><aside>

于 2013-02-23T11:33:29.670 に答える