Q

寬度浮動的div下推

html
css

2011-02-18 95 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

相關問題