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

CSS - divs - clear：none和左右浮动

1 个答案: