Question

我已经浮动了两个div 左但是右边的div有一个巨大的文字（没有br s）并且它被推下来

我应该在css中做些什么，以确保正确的div不会下推

我曾试过给它一个宽度，但宽度不会占用屏幕的其余部分，因为不同的电脑有不同的屏幕尺寸......

http://jsfiddle.net/4ZGmj/

感谢

Pradyut

Answer 1

您必须为至少一个元素设置width。示例：http://jsfiddle.net/4ZGmj/6/

Answer 2

你必须给第二个div一个宽度。否则它只会占用它可以获得的任何空间（因为没有br的大文本）而当它变得太宽时它就不会漂浮了。
因此，如果您添加width:400px;之类的内容，它会像您希望的那样浮动。

Answer 3

看起来您正在尝试创建2柱流体布局。我可以建议以下示例吗？

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/

Answer 4

我再次更新了你的小提琴，这次左栏是静态宽度，右边是流畅的。 CSS如下：

.ldiv {
    float: left;
    clear:none;
    border-style:solid;
    border-color:red;
    width:200px;

}
.mid_div {
    padding: 10px;
    float:none;
    clear:none;
    margin:0 0 0 220px;
    width:auto;
}

你可能想在IE中测试一下。

此致西蒙

Answer 5

我已经为你更新了你的小提琴。您需要为两个div明确设置宽度，因为对于大量文本，div将缩放到需要的宽度。

更新的CSS如下所示：

.ldiv {
    float: left;
    clear:none;
    border-style:solid;
    border-color:red;
    width:300px;
    margin:0 20px 0 0;

}

.mid_div {
    padding: 10px;
    float:left;
    clear:none;
    width:300px;

}

你会注意到清楚：没有;已被添加到两个div中，这意味着div不会被推送到下一行。

此致西蒙

浮动div的宽度向下推

5 个答案: