0

4 つの div タグがあります。それらの1つは.maindivです。残りはクラスの中.mainにあります。.sub私が望むのは、最初の div タグを最初に表示.mainすることです。残りは最初の div タグの右側に配置されますがoverflow、メインの div タグは非表示になるため、他の 2 つの div タグは表示されず、最初の div タグのみが表示されます. 私はこのコードでこれを達成しようとしています。どうすればこれを達成できますか？

.main {
    width: 100%;
    height: 500px;
    background: red;
    overflow: hidden;
}

.sub {
    width: 100%;
    height: 300px;
    float: left;
}

.blue { background: lightblue; }
.green { background: green; }
.orange { background: orange; }
4

2 に答える 2

1

sub私があなたを正しく理解していると仮定すると、左側に 1 つ、右側に 2 つの3 つの div をすべて表示したいとします。問題は、幅を 100% に設定しているため、それらを配置するスペースがないことです。隣同士に浮いています。

コンテナーの全幅を占有しないように、幅を設定する必要があります。たとえば、それぞれの幅を 50% にすることができます。

また、右側の 2 つの div の高さを設定して、それらの高さの合計が左側の div と同じになるようにする必要があります。

更新：

左の div のみが最初に表示されるようにするには、次のようにサブ div の周りに別のラッパー div を追加するのが最善だと思います。

<div class="main">
    <div class="wrapper">
        <div class="sub blue"></div>
        <div class="sub green"></div>
        <div class="sub orange"></div>
    </div>    
</div>

幅を 200% に設定。

.wrapper {
    width:200%;
}

次に、右側の div を表示したい場合は、変換、相対位置、またはマージン設定のいずれかを使用して、ラッパー div を再配置することにより、それらを画面にスライドさせることができます。

更新されたフィドルの例

于 2013-05-12T12:29:53.747 に答える
0

理由はわかりませんが、この状況で最初の項目の下にスペースがあると、期待どおりに機能しないことがわかりました..

サブマッチの高さを作るとうまくいきます：

.sub {
    width: 100%;
    height: 500px;
    float: left;
}

http://jsfiddle.net/Ex9EC/2/

おそらくこれは完全に間違ったアプローチですが、コメントを知っている人を待ってください。

また、外側/コンテナのdivの位置を（相対、絶対、または固定に）設定する必要がある方法について何かがあるかもしれないと思うので、それを追加しましたが、それがなくても機能するようです：

http://jsfiddle.net/Ex9EC/3/

于 2013-05-12T11:20:27.133 に答える