CSSを使ってそのdivをきれいに移動するにはどうすればよいですか？

-1

私はいくつかのCSSをやっていると私はそこに結果を掲載：CSSを使ってそのdivをきれいに移動するにはどうすればよいですか？

http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/419882_389321854411184_131327856877253_1629934_584123648_n.jpg

を、私はそれが右の青い1の下にありますように、少しオレンジとグレーのdivのを上に移動したいと思います。

私はポジションを使うことができると知っています：絶対にどこにでもdivを移動しますが、これは明らかにそれを実行する最良の方法ではありません。

どうすればいいですか？ここで

は、これらの5つのdiv要素のCSSコードです：

#alldivs { 
     width: 700px; margin: 0 auto; position: absolute; padding: 30px; 
    } 

    #green { 
     width: 400px; height: 350px; margin: 0px; float: left; background: green; 
    } 

    #blue { width: 300px; height: 250px; margin: 0px; float: right; background: blue; 
      }  

    #red { width: 400px; height: 200px; margin: 0px; float: left; background: red; 
    } 

    #orange { 
     width: 300px; height: 100px; float: right; background:orange; 
    } 

    #grey { 
     width:300px; height:200px; float:right; background:grey; 
    }

どうもありがとう

出典

2012-03-06 eric01

あなたのHTMLを投稿できますか？ – Colleen

青とオレンジ色のdivをラップ、CSSを変更しないでください。あなたのHTMLは：

<div id="alldivs"> 
    <div id="green"></div> 
    <div> 
     <div id="blue"></div> 
     <div id="orange"></div> 
    </div> 
    <div id="red"></div> 
    <div id="grey"></div> 
</div>

this exampleを参照してください。

出典

2012-03-06 07:01:40 scessor

こんにちはscessor、お返事ありがとうございました。それはまさに私が探していたものです。よろしくご回答いただきありがとうございます。 – eric01

自分の携帯電話に、私はこれをテストすることはできませんので...

は右、青、グレー、オレンジにフロートを追加します。そして、グレーとオレンジをクリアしてください。フロートは緑と赤を残しました。赤色の透明ここで

UPDATE

オーケーを残しているyaは行きます。このマークアップを使用すると、CSSで柔軟に対応できます。

<html> 
<head> 
    <style> 
     * { 
      margin: 0; 
      padding: 0; 
     } 

     .wrapper { 
      margin: 0 auto; 
      width: 700px; 
     } 

     .col_1 { 
      float: left; 
      width: 400px; 
     } 

     .col_2 { 
      float: right; 
      width: 300px; 
     } 

     .green { 
      height: 350px; 
      background: green; 
     } 

     .red { 
      height: 200px; 
      background: red; 
     } 

     .blue { 
      height: 250px; 
      background: blue; 
     } 

     .orange { 
      height: 100px; 
      background: orange; 
     } 

     .grey { 
      height: 200px; 
      background: grey; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="col_1"> 
      <div class="green"></div> 
      <div class="red"></div> 
     </div> 
     <div class="col_2"> 
      <div class="blue"></div> 
      <div class="orange"></div> 
      <div class="grey"></div> 
     </div> 
    </div> 
</body> 
</html>

出典

2012-03-06 07:02:54 jjNford

私はあなたの方法を試みたが、私はまだ同じ問題を抱えていた。ユーザーscessorがhtmlを変更することを提案しています。私はまた、green = blue + orangeのdivサイズの場合、divの順序をhtmlで変更するだけで済むことも分かりました。サイズが一致しない場合、scessorの方法は常に働いています – eric01

@ eric01私が言ったように、私は私の電話にいました：P笑私はちょうどあなたのリンクを見て、何をしようとしていたのを読む。あなたのソースを見ていなかった、ごめんなさい、今日は答えを更新する計画だったが、問題解決のように見える。 – jjNford

@ eric01 updated answer ...うまく動作します – jjNford

CSSを使ってそのdivをきれいに移動するにはどうすればよいですか？

答えて

関連する問題