正確對齊元素，同時存在一個水平滾動條

我有一個頁面，我想要一個元素在同一時間對齊，我有可能是寬的元素，並導致水平滾動條。例如：正確對齊元素，同時存在一個水平滾動條

<body> 
<div style="float:right">Stay right</div> 
<div style="white-space:nowrap; clear:both; font-size:2em"> 
    Wide child element which determines the width of the page. 
</div> 
</body>

如果寬元素適合瀏覽器窗口，此工作正常。但是，如果瀏覽器窗口過小，以致出現horisontal滾動條「留權」元素將與窗口對齊，而不是頁面：

wrong right alignment

如果我移動滾動條「留權」元素移動，並沒有真正對齊任何東西。

如果添加整個頁面圍着一張桌子它做什麼，我wan't：

<body> 
<table width="100%"><tr><td> 
<div style="float:right">Stay right</div> 
<div style="white-space:nowrap; clear:both; font-size:2em"> 
    Wide child element which determines the width of the page. 
</div> 
</td></tr></table> 
</body>

的「留權」的元素將與廣子元素的右側對齊瀏覽器窗口大小無關。

編輯：上面的表基於溶液將右對齊到最大的寬子元素或窗口寬度的寬度。實際上，這給頁面提供了一個由頁面內容決定的「最小寬度」（即寬子元素）。這是我想要的 - 從原文中不清楚，對不起。

我想知道是否有比包裝整個頁面更好的方法。

來源

2012-08-16 Jakob Schou Jensen

切勿將整個頁面包裝在表格中。它弄亂了你的HTML距今約2000年

我想你想爲你的div，這行了窗口，而不是頁面的元素的fixed位置：

.myDivThatFloatsRight { 
    position: fixed; 
    top: 10px; 
    right: 10px; 
}

來源

2012-08-16 16:16:45 Hidde

據我所見，此解決方案不能解決問題。 myDivThatFloatsRight不會考慮寬子元素的寬度。 – 2012-11-12 11:44:02

那是一個非常有趣的問題。它實際上是因爲div上的計算寬度與窗口大小（和主體大小）相匹配而不是文本的寬度。浮動文本在渲染時會查看其容器的寬度/高度（並且由於該計算值實際上是窗口的大小，所以float會停在窗口的邊緣）。

這實際上並不經常發生，因爲大多數網站都使用類似grid960/foundation /等的東西，並且提供了最小/最大寬度（您可能知道設置寬度可以解決您的問題）。

我不知道動態大小的文本的真正好解決方案（只有css）...我可以想到的唯一不使用表格就是使用clearfix。它真的被用於/爲具有浮動子元素的元素創建（爲了給它們一個正確的寬度/高度，浮動元素通常不會影響容器的尺寸），但它也適用於這種情況。

<body> 
    <div class="clearfix"> 
     <div style="float:right">Stay right</div> 
     <div style="white-space:nowrap; clear:both; font-size:2em"> 
      Wide child element which determines the width of the page. 
     </div> 
    </div> 
</body>

編輯：我撒謊了，我想出了一個第二（更好）的方式，但它確實需要一個更現代的瀏覽器。它是使用包裝display: inline-block或display: table。它實際上只是clearfix的一個子集，但是如果你可以脫離基於IE8 +的話，它將起作用。

<body> 
    <div style="display:inline-block"> 
     <div style="float:right">Stay right</div> 
     <div style="white-space:nowrap; clear:both; font-size:2em"> 
      Wide child element which determines the width of the page. 
     </div> 
    </div> 
</body>

來源

2012-08-16 16:40:35 SciSpear

你的解決方案是完美的 - 他們都做我所要求的 - 但不是我想要的東西...我需要「保持正確」的元素，以對齊最大的廣泛的孩子或窗口寬度。這不是問題中的原文所說的。抱歉! – 2012-11-12 11:38:05

正確對齊元素，同時存在一個水平滾動條

回答

相關問題