正确对齐元素，同时存在一个水平滚动条

我有一个页面，我想要一个元素在同一时间对齐，我有可能是宽的元素，并导致水平滚动条。例如：正确对齐元素，同时存在一个水平滚动条

<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

正确对齐元素，同时存在一个水平滚动条

回答

相关问题