Question

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

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

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

wrong right alignment

如果我移动滚动条，则“向右移动”元素会移动，并且不会与任何内容对齐。

如果在整个页面周围添加一个表，它就会做我想做的事情：

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

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

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

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

Answer 1

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

Answer 2

永远不要将整个页面包装在表格中。它大约在2000年就弄乱了你的HTML。

我认为你想要fixed的{{1}}位置，它会将元素与窗口而不是页面对齐：

div

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

2 个答案: