如何在没有容器div的情况下独立地浮动不同高度

Question

我有两列，其中元素浮动到相对的两侧，但是当元素的内容超过最小高度时，它会在另一侧结束。使用clear:left可将元素保持在正确的位置，但当内容超出最小高度时，会导致另一侧的元素被向下推。

这是我追求的http://jsfiddle.net/93Ljqb36/4/

...但使用下面的标记，不会将元素包装在浮动的div中

<div class="wrap">
    <div class="foo left">LEFT 1</div>
    <div class="foo right">
        RIGHT 1...
        The purple elements below are floated right, but end up on the left when content exceeds minimum height. I also need to avoid pushing the elements on the left down when content exceeds height. How do I keep floated elements on the same side without using more divs as this is meant to be a responsive design.. 
    </div>
    <div class="foo left">LEFT 2</div>
    <div class="foo right">RIGHT 2</div>
    <div class="foo left">LEFT 3</div>
    <div class="foo right">RIGHT 3</div>    
</div>

http://jsfiddle.net/93Ljqb36/5/

Answer 1

尝试将.right类的float属性更改为left，如下所示：

.right
{
    float: left;
    background: #BAB1E5;
}

Fiidle.