浮動佈局//如何定位正確第三格下的第一

Question

大約有浮動找到我確切的問題，這麼多的問題，對不起，如果我發佈了一個副本...

---

我想DIV＃ 3如果瀏覽器寬度不足以支持div＃2右側，則直接在div＃1下面。 將它全部移到左邊是我找到的最佳選擇。

問題是，即使浮動到左邊，div＃3將在div＃2高度下。 有沒有簡單的方法來解決這個問題，看起來好像div＃2是正確地浮動。 （我不能這樣做，因爲我不想固定寬度的容器元素）。

目標：我想要一個看起來像一個完全一樣，只是沒有使用：float：right;因爲我不想固定頁面寬度。我希望它更清楚。

我知道@media屬性在CSS中，但如果可能的話，我想學習更簡單的解決方案。

jsfiddle

---

編輯：

託管與破解它：http://jsfiddle.net/WEL6p/

一個是絕對位置＃1是相對的。然後添加浮動到左側和可見性：無;與＃2相同寬度和一些小高度。

---

<div id="container"> 

    <div id="top">1</div> 
    <div id="right">2</div> 
    <div id="bottom">3</div> 

</div> 

<div id="container2"> 

    <div id="top2">1</div> 
    <div id="right2">2</div> 
    <div id="bottom2">3</div> 

</div> 

---

CSS：

div {display: inline-block; font-size: 50px; text-align: center; vertical-align: middle; color: white;} 
div div {background: red; margin: 10px; border: 2px solid black;} 
/* ------------------- LEFT ------------------------ */ 
#container {width: 350px; border: 2px solid green; float: left;} 

#top {width: 200px; height: 100px; float: left;} 
#bottom {width: 200px; height: 100px; float: left;} 
#right {width: 100px; height: 300px; float: left;} 
/* ------------------- RIGHT ----------------------- */ 
#container2 {width: 350px; border: 2px solid green; margin-left: 10px;} 

#top2 {width: 200px; height: 100px; float: left;} 
#bottom2 {width: 200px; height: 100px; float: left;} 
#right2 {width: 100px; height: 300px; float: right;} 

Answer 1

我想我找到了工作黑客：

DIV＃1是相對的，浮動到左。
div＃2是絕對的，並且使用{left：}屬性定位到右側。
div＃3浮動到左側。

然後，只需將{margin-right：}添加到div＃1與div＃2寬度+邊距之間。

http://jsfiddle.net/WEL6p/1/

學分是暗示我到正確的方向:)
TY人非常多

---

HTML：

<div id="top">1</div> 
<div id="right">2</div> 
<div id="bottom">3</div> 

CSS：

div {display: inline-block; font-size: 50px; text-align: center; color: white; border: 2px solid black;} 
div {background: red; margin: 10px;} 


#top {width: 200px; height: 100px; float: left; position: relative; margin-right: 130px;} 
#bottom {width: 200px; height: 100px; float: left;} 
#right {width: 100px; height: 300px; position: absolute; left: 230px;}