0

私はこのようなものを持っています:

<div class="top">top</div>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="bottom">bottom</div>

jsFiddle の関連コード

ご覧のとおり、上部の div と下部の div の間に div コンテナーがあります。この div コンテナーが必要なだけ下のダイブを移動するようにします (固定値にはしたくありません。つまり、左のコンテナーがはるかに高くなるとしましょう。下の div も押し下げられます)。 .

どうやってやるの？

4

4 に答える 4

1

現在、左/右の div に絶対位置を使用しているため、下部の div を正しく配置するには常に高さを知る必要があります。あなたがしたいのは、代わりにこれらをフロートしてから、一番下のdivのフロートをクリアすることです。そうすれば、左/右をコンテンツと同じ高さにすることができ、下部の div が常に下に表示されます。

.bottom {
    clear: both;
}

.left {
    float: left;
    width: 50%;
    min-height: 50px;
}

.right {
    float: right;
    width: 50%;
    min-height: 150px;
}

それに応じてjsFiddleを変更し、右側のdivを高くして、下部が常に下に表示される方法を示しました。

于 2013-01-09T18:15:50.003 に答える
1

これは単純に見える問題ですが、最終的にはややこしい問題になります。position:relative と position:absolute に関する上記の提案は、適切な最初のステップです。その後、右の div の幅を設定するためのスペースを確保する必要があります。

.left {
    height: 100%;
    min-height: 50px;
    border:1px dashed red;
    padding-right: 50px;      <---
}

次に、作成したスペースに右の div をフロートします。

.right {
    float:right;              <---
    width: 50px;              (This needs to match the padding-right value above.)
    text-align: right;
    min-height: 50px;
    height: 100%;
    border:1px dashed blue;
}

最後に、html で左の div の前に右の div を配置します。

<div class="top">top</div>
<div class="container">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="bottom">bottom</div>

(Chrome と IE でテスト済み)。

参照:右の div は幅を固定し、左の div は最大幅まで拡張しますか?

ここでフィドルをチェックできます: http://jsfiddle.net/x3QfG/1/

それはあなたのために働くでしょうか？

于 2013-01-09T21:00:51.753 に答える
0

floats絶対に配置するのではなく、使用してください。これにより、アーキテクチャが非常に流動的で柔軟になります。

とに必要なfloat値を適用した後、 clearfixハックを使用して、 float要素をコンテナ内に含めます。これで、またはdivのいずれかが高さを増すたびに、下部のdivが押し下げられます。.left.right.left.right

于 2013-01-09T18:19:51.263 に答える
0

コンテナーを相対にして、左右を絶対にし、float を使用するのではなく、幅を設定して配置します。

于 2013-01-09T18:55:06.533 に答える