如何在左边放一个div，在右边垂直放两个div

Question

我经常使用非常经典的布局，我总是即兴创作我是如何做到的。我将图片上的三个div分开（红线）。我的问题始终是正确的底部：即使我修正了左边的Div的大小，我把顶部div设为float：right。我仍然不得不为有问题的div作弊并且利用负边缘进行游戏。

对于这个例子，它很容易，因为两个div（左边和顶部）有固定的大小，但我想有一个响应灵活布局的模式。

我已经在网上搜索过，它接缝每个人都有自己的解决方案，但我找不到任何明确的清洁美味解决方案。

任何想法？

预期的行为是：

1. 没有固定的尺寸，实际上根本没有尺寸（让元素占据他们需要的位置）
2. 如果右侧还有空间，请不要换行。
3. 如果没有更多空间，请跳转到新行但完全向左移动（正如display:inline-block所预期的那样）

这是一个jsfiddle样本：

即使有id='2'的div有足够的空间（宽度），它也会跳转到一个新行（因为display:inline-block会尝试将该div添加到{{1}的右侧当它找不到时，它会转到一个新行而不是id='2'的右侧

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;
}