0

3 列のページを作成しようとしています。外側の列は単純です。ただし、中央の列には、上部に列幅の div があり、コンテンツに合わせて垂直方向に拡張する必要があります。その後に、横に並べて配置する必要がある 2 つの他の div が続きます。私の問題は、上の div が拡大するにつれて、2 つの下の div が下に移動することです。

中央の列のコア コードは次のとおりです。

// the top column-wide div
echo '<div id="centre">';
// echo some variable length text
echo '</div>';

// the bottom left div
echo '<div id="centreleft">';
// echo some variable length text
echo '</div>';

// the bottom right div
echo '<div id="centreright">';
// echo some variable length text
echo '</div>';

固定高さの上部 div を使用すると、次の css が機能します。

#centre {
    position: absolute;
    left: 230px;
    top: 30px;
    width: 690px;
    overflow: visible;
}
#centreleft {
    position: absolute;
    left: 230px;
    top: 355px;
    width: 335px;
    overflow: visible;
}
#centreright {
    position: absolute;
    left: 595px;
    top: 355px;
    width: 320px;
    overflow: visible;
}

トップ div の高さを可変にするには、何を変更する必要がありますか? 下のdivの位置を相対的に変更しようとしましたが、すべてが画面の左上に書き込まれます。

4

3 に答える 3

1

絶対配置を使用しないでください。下位の div をフロートするかdisplay:inline-block;、 などを使用します。絶対位置とは、「それらをそのままの場所に保持する」ことを意味し、ドキュメント フローからそれらを削除し、所定の位置に固定します。

詳細はこちら: https://developer.mozilla.org/en/CSS/position#Absolute_positioning

乾杯

于 2012-04-18T19:39:18.603 に答える
0

私は同意します。絶対配置の代わりにこれらの赤ちゃんをフロートし、2 番目の div をクリアして、最初の div を確実に下回るようにします。

于 2012-04-18T20:14:11.273 に答える
0

とにかく、なぜ position:absolute を使用するのですか?

参照: http://jsfiddle.net/vFEux/

また、マージンを使用して、コンテナーを互いにさらに移動させます。

于 2012-04-18T19:44:13.940 に答える