Html 存在水平滚动条时右对齐元素_Html_Css_Layout_Scrollbar

Html 存在水平滚动条时右对齐元素

html css layout

Html 存在水平滚动条时右对齐元素,html,css,layout,scrollbar,Html,Css,Layout,Scrollbar,我有一个页面，我希望一个元素对齐的权利，同时我有可能是广泛的元素，并导致水平滚动条。例如： <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>
<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>


靠右
决定页面宽度的宽子元素。

如果宽元素适合于浏览器窗口，则此操作非常有效。但是，如果浏览器窗口太小，以至于出现水平滚动条，“保持右侧”元素将与窗口对齐，而不是与页面对齐：

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

如果我移动滚动条，“保持正确”元素会移动，并且不会真正与任何东西对齐

如果在整个页面周围添加一个表，它会执行我不希望执行的操作：

<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>


靠右
决定页面宽度的宽子元素。

无论浏览器窗口大小如何，“保持右侧”元素都将与宽子元素的右侧对齐

编辑：上面基于表格的解决方案将右对齐到宽子元素宽度或窗口宽度中的最大值。实际上，这为页面提供了一个“最小宽度”，该宽度由页面内容（即宽子元素）决定。这就是我想要的-这在原文中不清楚，对不起

我想知道是否有比在表格中包装整个页面更好的方法。

永远不要在表格中包装整个页面。从2000年开始，它就把你的HTML搞乱了

我认为您希望为

div

设置一个固定的

位置，它将元素与窗口而不是页面对齐：
.myDivThatFloatsRight {
   position: fixed;
   top: 10px;
   right: 10px;
}

不要在表格中包装整个页面。从2000年开始，它就把你的HTML搞乱了

我认为您希望为div
设置一个固定的位置，它将元素与窗口而不是页面对齐：
.myDivThatFloatsRight {
   position: fixed;
   top: 10px;
   right: 10px;
}

这是一个非常有趣的问题。这实际上是因为div上计算的宽度与窗口大小（和正文大小）匹配，而不是与文本的宽度匹配。在渲染时，浮动文本在其容器中查找宽度/高度（由于计算的值实际上是窗口的大小，因此浮动停止在窗口的边缘）
这种情况并不经常发生，因为大多数网站都使用grid960/foundation/etc之类的东西，并且提供了最小/最大宽度（您可能发现设置宽度可以解决问题）
对于动态大小的文本（仅使用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>

这是一个非常有趣的问题。这实际上是因为div上计算的宽度与窗口大小（和正文大小）匹配，而不是与文本的宽度匹配。在渲染时，浮动文本在其容器中查找宽度/高度（由于计算的值实际上是窗口的大小，因此浮动停止在窗口的边缘）
这种情况并不经常发生，因为大多数网站都使用grid960/foundation/etc之类的东西，并且提供了最小/最大宽度（您可能发现设置宽度可以解决问题）
对于动态大小的文本（仅使用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>

你的解决方案很完美-它们都符合我的要求-但不是我想要的。。。我需要“保持右侧”元素与宽子项或窗口宽度中的最大值对齐。这不是问题原文所说的。很抱歉你的解决方案很完美-它们都符合我的要求-但不是我想要的。。。我需要“保持右侧”元素与宽子项或窗口宽度中的最大值对齐。这不是问题原文所说的。很抱歉就我所知，这个解决方案并不能解决这个问题。myDivThatFloatsRight将不考虑宽子元素的宽度。据我所知，此解决方案无法解决此问题。myDivThatFloatsRight将不考虑宽子元素的宽度。