0

我有一个页面，我希望一个元素右对齐，同时我的元素可能很宽并导致水平滚动条。例如：

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

如果宽元素适合浏览器窗口，则此方法可以正常工作。但是如果浏览器窗口太小以至于水平滚动条出现，“保持正确”元素将与窗口而不是页面对齐：

错误的右对齐

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

如果在整个页面周围添加一个表格，它会做我不想要的：

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

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

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

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

4

2 回答 2

3

这是一个非常有趣的问题。它实际上发生是因为 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>

编辑：我撒谎了，我想出了第二种（更好的）方法，但它确实需要更现代的浏览器。它是使用带有display: inline-blockOR的包装器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-16T16:40:35.487 回答
0

切勿将整个页面包装在表格中。自 2000 年左右以来，它就会弄乱您的 HTML。

我认为您想要一个fixed位置div，它将元素与窗口而不是页面对齐：

.myDivThatFloatsRight {
   position: fixed;
   top: 10px;
   right: 10px;
}
于 2012-08-16T16:16:45.713 回答