1

请看这个例子http://jsfiddle.net/xcYum/1/

  1. 我想知道为什么 div 标签（class=progress）内容被分成两行而不是一行（即你的进度与你的\n进度）。我不需要指定“div class=progress”的宽度。您能否给我一个解释，说明发生这种情况的所有 css 和/或 html 元素类型（或装箱）？我只想确切地知道规则是如何工作的，而不是记住它有效或无效的情况。

  2. 看来如果我将 .container css 更改为以下内容： .container { position: relative; } 那么 div 标签（class=progress）现在显示在单行中，为什么相对和绝对会有这样的区别？还是因为它是嵌套的？

  3. 我们如何避免嵌套绝对定位的 div 标签？有这样的结构是错误的还是不好的做法。我在这个例子中使用它是因为我想根据 'div class=container' 标签定位 '100%' 和 'your progress'，然后我可以移动 'div class=container' 标签。换句话说，这样做，我可以只移动一件东西（'div class=container' 标签）来移动两件东西（100% 和'你的进度'），反之则更多的工作。我的思维过程有什么问题？

4

2 回答 2

1

  1. 因为绝对定位的元素会收缩包装，换句话说，它会变得尽可能小。您可以使用强制文本从不换行white-space: nowrap

  2. 不知道为什么会这样

  3. 您不需要绝对定位元素子元素与父元素一起移动

于 2012-04-04T06:56:01.483 回答
0

  1. Absolute element establishes a new containing block for normal flow children, and for descendants whose position property is set to absolute.

    Reference: http://reference.sitepoint.com/css/absolutepositioning

  2. Same as first answer

  3. Absolute element is positioned with respect to its containing block. So, you just need a parent 'div class=container' to have relative position and then all its elements with absolute position will move with it.

    Reference: http://reference.sitepoint.com/css/absolutepositioning

于 2012-04-04T07:11:55.387 回答