用动态内容布局2个div

Question

我需要布置位于具有固定宽度和高度的容器中的2个div（http://jsfiddle.net/tWE8W/）：

<div class="container">
    <div class="left">
        <div class="element"></div>
    </div>

    <div class="right">
        <div class="element"></div>   
    </div>
</div>

• 两个div都包含具有固定尺寸的元素类型的div。可以动态添加和删除元素。
• div1位于左侧。这些元素应该叠加2并向右增长。
• div2位于右侧。元素应水平放置（浮动：左）。当元素到达div2的右角（也是容器的右角）。应该开始新的一行。
• div1应该具有基于其包含的元素的动态宽度。

它只需要使用最新版本的Google Chrome。

Answer 1

使用Flexible Box Layout左侧的框，如

A C E
B D

<强> FIDDLE

（相关）CSS

.left{
    float:left;
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

Browser support现在也很不错

修改

您可以使用align-content属性来对齐左侧的框。

设置align-content: space-between;将这些框空格如下：

<强> FIDDLE

Answer 2

我希望我理解正确http://jsfiddle.net/nindos/8DTp2/9/

<style>
.container
{
    height: 50px;
    width: 300px;
    overflow: hidden;

    border: 1px solid black;
}

.left,.right{float:left;width:50%;height:100%;overflow:auto}
.left{background-color:red}
.right{background-color:blue}
.element{display:inline-block;background-color:pink}</style>