1

別の大きなレイヤーの中に 3 つの div レイヤーがあります。このようなもの：

画像 http://dev.kgstiles.com/wp-content/uploads/2012/10/Stack.png

青いセクションがヘッダーとフッターだとしましょう。私が現在持っているのは、一番上の黄色の div の隣にある緑ですが、緑の div の一番下が 2 番目の黄色の div を押し下げています。基本的に、2 つの div が隣り合っており、その両方の下に 1 つの div がありますが、写真にもっと似たものが必要です。緑の div を両方の黄色の div の隣に置くことができないのは何ですか?

各divにたくさんあるので、コードを正確に投稿しますが、次のようなものがあります:

<div class="container" >

<div id="greenDiv" style="float:right; padding-right:5%; padding-top:15px;">

</div>
<div id="topYellow" style="dsiplay:block;"> 

<-- Content -->
</div>
<div id="bottomYellow" style="dsiplay:block; float:left;"> 

<-- Content -->

</div>

緑のdivが一番下の黄色のdivを押し下げないようにするには、正確に何をする必要がありますか? どんな助けでも大歓迎です！

4

3 に答える 3

0

フロートの使用はまったく避けます。緑の div の幅が固定の場合、次のようにスタイルを設定できます。

.container {
    position: relative; /* or anything besides static */
}

#greenDiv {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px; 
}

#topYellow, #bottomYellow {
    margin-right: 100px; /* Plus more if you want a gap */
}

基本的に、これにより、コンテナーの「フロー」から緑色の div が取り除かれます。黄色の div は通常のフローで単純に配置され、それらのマージンは緑色の div と重ならないようにします。#greenDivまたは、#bottomYellow絶対位置を使用する代わりに、フロートすることもできます。これの利点は、ケース#greenDivが 2 つの黄色よりも背が高い場合に、フッターで を実行すると、フッターが重ならないclear: bothようにする必要があることです。#greenDiv

于 2012-10-09T02:34:13.267 に答える
0

黄色の要素の両方をラップして、黄色の要素の代わりにその要素を左にフロートさせ、次に緑を左にフロートさせることができます。コンテナ全体を閉じる前に clearfix を追加すると、BOOM! 左に黄色の要素、右に緑の要素があり、コンテナーは高さの高い方のセットの高さまで伸びます。

于 2012-10-09T02:52:38.507 に答える
0

すべての div float:right; を設定します。最初の緑の div; また ：

<div class="container">
  <div id="letf_div" style="float:left">
     <div id="yelow1"></div>
     <div id="yelow2"></div>
  </div>
  <div id="right_div" style="float:left">
   <div id="green"></div>
  </div>
</div>
于 2012-10-09T09:22:42.877 に答える