4

例如，我有这样的情况（人为的）示例：

<div id="outer" style="margin: auto>
    <div id="inner1" style="float: left">content</div>
    <div id="inner2" style="float: left">content</div>
    <div id="inner3" style="float: left">content</div>
    <br style="clear: both"/>
</div>

在任何元素上都没有设置宽度的地方，我想要的是#inner1，#inner2并且#inner3在内部水平地彼此相邻出现，#outer但正在发生的事情是，#inner1并且#inner2彼此相邻出现，然后#inner3换行到下一行。

在发生这种情况的实际页面中，还有很多事情要做，但是我已经用 Firebug 非常仔细地检查了所有元素，但不明白为什么#inner3元素没有出现在同一行，#inner1并且#inner2导致#outer变宽。

所以，我的问题是：有什么方法可以确定浏览器为什么按原样调整#outer 的大小，或者为什么#inner3即使有足够的空间将其放在前一个“行”上，它也选择换行？对于这个问题的具体解决方案，对于那些发现自己在前端工作的可怜的后端开发人员，你的核心 HTML/CSS/Web UI 人员有什么技巧或技术？

4

4 回答 4

4

如果有一个工具可以准确地告诉你所有的布局问题是什么，那就太好了，但在这种情况下，浏览器完全按照它应该有的方式呈现页面——浮动的组合宽度超过了包含块的宽度，所以最后一个下降到一个新的行（这与 IE6 扩展框/浮动下降问题略有不同，这通常是由浮动内部的内容引起的，而不是浮动本身）。因此，在这种情况下，您的页面没有任何问题。

调试这只是在 Firebug 中遍历您的 HTML 并找出块的哪些子块超出块的宽度的问题。Firebug 为此提供了大量信息，尽管有时我需要使用计算器。我认为您所描述的关于能够看到哪些元素约束其他元素的描述过于复杂和压倒性，特别是对于从正常流程中删除的元素（例如浮动或定位元素）。

此外，更深入地了解 CSS 布局的方式也有很大帮助。它可以变得相当复杂。

例如，通常建议为浮动元素分配明确的宽度——W3C CSS2 规范指出浮动需要有明确的宽度，并且没有提供没有它怎么办的说明。我认为大多数现代浏览器都使用“缩小以适应”方法，并将自己限制在内容的宽度上。但是，这在旧浏览器中并不能保证，并且在类似 3 列布局的情况下，您将受到浮动内容宽度的支配。

此外，如果您正在努力实现 IE6 兼容性，则有许多与浮点相关的错误也可能导致类似问题。

于 2008-09-05T01:30:43.377 回答
2

试试 Firefox 的Web 开发者插件。具体来说，信息 -> 显示块大小和轮廓 -> 轮廓块级元素选项。这将允许查看元素的边界，以及 Firefox 看到它们的大小。

于 2008-09-04T21:53:27.143 回答
0

在 Firebug 的 CSS 选项卡中，您可以看到哪些样式规则适用于级联顺序中的选定元素。这可能会也可能不会帮助您解决问题。

我的猜测是#inner3 的内容导致它在第一行下方换行，而#outer 的大小只是为了适应较小的所需空间。

于 2008-09-04T22:30:20.690 回答
0

所以我在我的具体案例中找到了答案——在 DOM 中有一个更远的 div，它设置了特定的左/右边距，它压缩了它以及其中的所有内容。

但问题的核心实际上是如何轻松调试此类问题？在这种情况下，例如，在 Firebug 中，当鼠标悬停在布局面板中元素的大小上时，会显示一个工具提示，上面写着“宽度受外部元素 X 约束；高度受元素上样式 Z 约束” Q”或“由内部元素 A、B 和 C 贡献的宽度”。

我希望我有时间写这样的东西，尽管我怀疑从 Firefox 的渲染引擎中获取这些信息会很困难（如果不是不可能的话）。

于 2008-09-04T22:53:48.247 回答