CSS，得到浮容器優先內部

float:left在鉻和IE7行爲不同如圖this fiddle和下面ASCII藝術：CSS，得到浮容器優先內部

IE7確實，

<-width-> 
Col1 Col2 
text # # 
    # # 
    # #

代替

<-width-> 
Col1 
text 
col2 
# # # # # 
#

有沒有辦法在所有瀏覽器中獲得ie7行爲？

換句話說，不堆棧col1和col2，除非頁面非常窄。我們的目標是創建一個「superfluid」兩列布局，其中col1適合其內容，col2使用窗口的剩餘寬度幷包裝其內容，或者如果col1不能放在旁邊，則顯示在col1下方。

在回覆和評論反饋後，重寫得更準確。

來源

2011-05-09 Grastveit

我已經看過這個小提琴和重讀這個問題，但有一個很艱難的時間搞清楚你在問什麼。您是否有理由使用'
'和'

'來創建此佈局？在ascii藝術＃1中製作佈局很簡單，但問題很混亂。你看過CSS'clear'屬性嗎？ – 2011-05-09 09:53:03

好吧，我簡化了小提琴只顯示問題。 '表'在那裏顯示想要的行爲，但我想它會造成混亂。 – Grastveit 2011-05-09 10:05:58

我只是感到困惑，因爲這看起來非常微不足道。是[這是你想要的]（http://jsfiddle.net/LpkQX/25/）？如果沒有，請解釋原因。 – 2011-05-09 10:13:42

回答

我仍然無法理解你所追求的是什麼以及問題是什麼。我將會發佈一個答案，並且可以在我們去的時候把這些想法拍下來。

嘗試1：

您需要設置一個寬度在列中的至少一個。

試試這個，告訴我它有什麼問題。 http://jsfiddle.net/LpkQX/27/

嘗試2：

浮法右欄內部左側列中。現在column1只是一個包裝。

http://jsfiddle.net/LpkQX/28/

來源

2011-05-09 10:32:11

好吧，它完全按照它應該顯示。問題是固定的寬度。我認爲設置寬度不應該是必要的，因爲IE的行爲是按照要求的。請嘗試[this]（http://jsfiddle.net/Grastveit/rhKsu/）中的ie簡化示例來查看。 – Grastveit 2011-05-09 10:47:10

看到您更新的簡化小提琴，這在FF4，Chrome 10和IE8中看起來完全一樣。當詢問IE時，總是指定版本，因爲每個版本都有很大不同。然而，我想我現在在IE6和7中看到你指的是什麼 - 但是改變文本使得它在其他瀏覽器中以你想要的方式呈現，所以我沒有看到這是如何構建設計的真正方式。 – 2011-05-09 11:03:21

IE7是的，抱歉沒有指定它。通過改變文字，你的意思是什麼讓它以我想要的方式變得更加銳利？感謝您在回答中的努力，我認爲如果不是針對協議，我會更新基於此的問題。 – Grastveit 2011-05-09 11:25:58

相關問題