Q

宽度浮动的div下推

html
css

2011-02-18 68 views 4 likes

4

我浮起两个div 离开，但右边的div有一个巨大的文本（不宽单峰），并可以下推宽度浮动的div下推

我应该怎么在CSS这样做以确保正确的股利不倒推

我曾试图给它的宽度，但宽度不占用屏幕，不同的计算机具有不同屏幕尺寸的休息...

http://jsfiddle.net/4ZGmj/

感谢

Pradyut

2011-02-18 Pradyut Bhattacharya

A

回答

3

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

2011-02-18 07:52:55 Sotiris

1

你必须给第二个div的宽度。否则，它只会采取任何可以得到的空间（因为没有br的大文本）。
当它变得太宽时，它不会再漂浮了。
所以，如果你添加像width:400px;这样的东西，它会漂浮，就像你想要的。

2011-02-18 07:51:07 gnur

+0

任何不宽度，使得它需要宽度的其余部分。 – 2011-02-18 07:53:44

+0

如果你想做的没有宽度，恐怕你会使用表格。或者你可以设置`max-width`，如果你想让它动态，但也希望它工作:)。 – gnur 2011-02-18 07:55:36

+1

但记得表格仅用于表格数据，而不是布局:) – Kyle 2011-02-18 07:59:05

0

我已经为你更新了你的小提琴。您需要明确地为这两个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不会被推到下一行。

问候，西蒙

2011-02-18 07:56:34 SimonDowdles

1

它看起来像你想创建一个2列流动布局。我可以建议下面的例子吗？

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

2011-02-18 08:01:17 apiguy

1

我又更新了小提琴，此时左边一列是一个静态的宽度，右边是流体。 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中测试它。

问候，西蒙

2011-02-18 08:41:39 SimonDowdles

相关问题