CSSには、divの右下にdivがあります。 DivsはHTMLの逆です

Question

説明が混乱しますが、2つのdivがあります。ページ上の左側に座っているもの、右側がフロートを介して座っているもの。右側のものはHTMLの最初のもので、左側のものは2番目のものです。基本的に、私はそれを持っているので、左のdivが上に座って、右のdivがその下に座っています。 LeftとRightがHTML上で順番に並んでいれば、浮動小数点数を取り除くのと同じくらい簡単です。しかし、これは事実ではないので、私は少し手が必要です。ここで私はセットアップを持っているjsfiddleです：http://jsfiddle.net/7bTjj/

Answer 1

あなたは絶対的なポジショニングを使用する必要があります。これで、レイアウトの管理用に作成されたCSS3プロパティを使用してこの問題を解決できます。

すべての山車を使用せずに、あなたは好きな順番であなたの .containerの内容を表示する

使用display:boxとbox-ordinal-groupプロパティ：

（唯一の簡略化のため-webkitベンダープレフィックス）

.container, .left, .right { 
    display:-webkit-box; 
    -webkit-box-orient: vertical; 
} 

.left { 
    -webkit-box-ordinal-group: 1; 
} 

.right { 
    -webkit-box-ordinal-group: 2; 
} 

ますので、」モバイルをターゲットにして、IEのサポートの欠如は問題ではありません。

Here's my fork of your fiddle。

Isotomaには、あなたのCSSを調整する際に参照したnice, readable introduction to flexboxがあります。

Answer 2

あなたは要素のheightとwidthを知っていれば、それはmarginで可能です。

.left { 
    height:20px; 
    width:70%; 
    float:left; 
    margin-left:-30%; 
} 

.right { 
    width:30%; 
    float:left; 
    margin-top:20px; 
} 

Demo

そうでない場合は、JavaScriptが必要になることがあります。ここにはsimilar questionがあります。