右對齊的雙列布局會丟失水平滾動條

我想要一個具有兩個右對齊列的佈局。所以，我創建了三個申報單（兩列和一個包裝）：右對齊的雙列布局會丟失水平滾動條

<div id="wrapper"> 
    <div id="left"> 
     First column 
    </div> 
    <div id="right"> 
     Second column 
    </div> 
</div>

我浮在left DIV左，right DIV權，並設置正確的寬度爲所有三個div的：

#wrapper{ 
    width:30em; 
} 
#left{ 
    float:left; 
    width:10em; 
} 
#right{ 
    float:right; 
    width:20em; 
}

這一切看起來如預期...

Without floating the div http://img690.imageshack.us/img690/5844/rightrightalign.png

..但後來我漂浮在wrapper DIV向右如果需要的話，並沒有WebKit的，也沒有Firefox的顯示水平滾動條：

Without the right align http://img690.imageshack.us/img690/8559/withoutrightalign.png

同樣的情況，如果我使用position: absolute; right:0

完整的示例HTML文檔：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
    <style type="text/css" media="screen"> 
     #wrapper{ 
      width:30em; 
      float:right; /* The problem line */} 
     #left{ 
      float:left; 
      width:10em; 
      background: green;} 
     #right{ 
      float:right; 
      width:20em; 
      background: red;} 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="left">Left</div> 
     <div id="right">Right</div> 
    </div> 
</body> 
</html>

有沒有辦法讓一個右對齊的雙列布局，不會丟失水平滾動條？

來源

2010-02-08 dbr

這是*怪異*！我在Windows 7的本地FF上進行了測試。我刪除了文檔類型，並將「overflow：auto」添加到了主體中，但都無濟於事。我正在刪除我的答案，所以這個問題吸引了更多的關注。真的有興趣這是爲什麼。 – 2010-02-08 01:04:13

您不希望爲此使用浮點數。這裏是你正在尋找的：

#wrapper{ 
    width:30em; 
    margin-right: 2px; 
    margin-left: auto; 
    } 
    #left{ 
    float:left; 
    width:10em; 
    background: green; 
    } 
    #right{ 
    float:right; 
    width:20em; 
    background: red; 
    }

來源

2010-02-09 17:19:18 Julik

啊哈，這似乎很好地工作，謝謝！ – dbr 2010-02-09 18:37:57

你可以用一行表來做到這一點。我只檢查了Chrome，但我認爲它可以在任何地方使用。訣竅是給最左邊的「空」單元100％的寬度，以壓迫所有其他的右邊。桌子本身釘在左邊緣，而不是右邊緣，所以當窗戶狹窄時，內容被推到右邊，並且你得到一個滾動條。

stuff before the columns 
<table style="width:100%" border=1><tr> 
<td style="width:100%">(empty) 
<td valign=top><div style="width:10em">left</div> 
<td valign=top><div style="width:20em">right right right right right right right right right right right right right right right </div> 
</table> 
stuff after the columns

隨着浮動：右，或位置是：絕對右：0，內容被釘在右邊，並且當窗口很窄，它只是消失離左邊緣。哎呀。

來源

2010-02-08 09:19:18 awhyte

雖然這是可能的，但不應對「非表格」頁面佈局使用表格格式。快照清楚地顯示導航和內容窗格，divs是去這裏的最佳途徑。表格語法應嚴格用於表格。 – 08Hawkeye 2010-08-19 18:20:55

Found an explanation of why this is happening：

我不相信有解決這個辦法不使用JavaScript。瀏覽器呈現相對於該頁面的左上角的頁面，因此位於該0,0點左上方的任何東西都實際上是在屏幕外。所有溢出發生在底部和右側。這與任何塊元素內的內容都是一樣的。因此，如果您的項目相對於頁面的右側定位，寬度超過100％。 0,0原點左邊的部分將被簡單地置於屏幕外

來源

2010-02-09 16:17:48 dbr

右對齊的雙列布局會丟失水平滾動條

回答

相關問題