如何把一個div放在左邊，兩個div放在它的右邊

Question

我有一個非常經典的佈局，我經常做到這一點，而且我總是在即興創作。我把圖片上的三個div分開（紅線）。我的問題始終是右下角：即使我修正了左側Div的大小，我將頂部div作爲float：right。我仍然不得不爲有問題的分區作弊，並以負邊距進行比賽。

對於這個例子，這是很容易的，因爲兩個div（左和上）具有固定大小，但我想有一個響應靈活佈局的模式。

我已經在網上搜索，它接縫每個人都有他自己的解決方案，但我沒有找到任何清晰乾淨的美味解決方案。

有什麼想法？

預期的行爲是：

1. 沒有固定的大小，其實，完全沒有上漿（讓元素取自己需要的地方）
2. 如果有留在空間對，不要換一個新的路線。
3. 如果沒有更多的空間，跳轉到一個新的生產線，但完全向左走（如display:inline-block預期）

這裏是一個的jsfiddle樣本：

即使有足夠的空間（寬度）與id='2' div，它跳轉到一個新行（因爲display:inline-block試圖將該div附加到id='2'的權利，當它找不到，它會去一個新的行，而不是去右id='1'）

http://jsfiddle.net/zhamdi/zu5sU/6/

我知道有JS網格來做到這一點像 http://gridster.net/

但我不想要的東西拖放，只是一個簡單的適應性佈局

Answer 1

一個快速的方式做到這一點是使用列布局。

你會把這兩個部分在自己的div：

JSFiddle Example

HTML

<div class="container"> 
    <div class="column"> 
     <div class="content one"> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="content two"> 
     </div> 
     <div class="content two alt"> 
     </div> 
    </div> 
</div> 

CSS

.column{ 
    float: left; 
} 
.content{ 
    width: 100px; 
} 
.content.one{ 
    height: 200px; 
    background: red; 
} 
.content.two{ 
    height: 100px; 
    background:blue; 
} 
.content.two.alt{ 
    background:green; 
}