如何把一个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; 
}