如何浮动不同的高度元素独立没有容器div

Question

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

这就是我想要的http://jsfiddle.net/93Ljqb36/4/

…但是使用下面的up标记不会将浮动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属性更改为左，如下所示:

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

Fiidle .