css - CSS - divs - clear:none 和左右浮动

Question

这是我的例子：http: //jsfiddle.net/pQ63V/2/

#div1 {
    background-color:red;
    width:300px;
    height:100px;
    float:left;
    clear:none;
}
#div2 {
    background-color:green;
    width:300px;
    height:50px;
    float:left;
    clear:none;
}
#div3 {
    background-color:blue;
    width:300px;
    height:50px;
    float:left;
    clear:none;
}
#div4 {
    background-color:cyan;
    width:300px;
    height:50px;
    float:left;
    clear:none;
}
#div5 {
    background-color:magenta;
    width:300px;
    height:100px;
    float:left;
    clear:none;
}
#div6 {
    background-color:yellow;
    width:300px;
    height:50px;
    float:left;
    clear:none;
}

我实际上要编辑的网站片段在这里： http ://www.luminescence.co.uk/testing/ 正如你所看到的，扩展左侧的 div 允许 div 浮动在右侧，扩展右侧的 div 不允许 div 浮动在左侧

我有不同高度的 div，希望它们能够浮动到较大 div 的左侧和较大 div 的右侧。

正如您在示例中看到的那样，黄色 div 不会与右侧的 div 保持一致（因为 css 是 float:left; ）

有没有办法“浮动：两者;” ?

谢谢！

Answer 1

你能试试这个小提琴吗？

http://jsfiddle.net/DY8CT/

将它们排列成列确实是获得所需结果的最佳选择

#div1 { background-color:red; width:300px; height:100px; float:left; clear:none; }
#div2 { background-color:green; width:300px; height:50px; float:left; clear:none; }
#div3 { background-color:blue; width:300px; height:50px; float:left; clear:none; }
#div4 { background-color:cyan; width:300px; height:50px; float:left; clear:none; }
#div5 { background-color:magenta; width:300px; height:100px; float:left; clear:none; }
#div6 { background-color:yellow; width:300px; height:50px; float:left; clear:none; }

.col {background:none; width:300px; float:left;}