css - 无内容换行的绝对定位

Question

我遇到了一个我似乎无法解决的讨厌的 css 问题。我想将包装器放置在具有 left 属性的容器内(在正方向；负方向似乎出于某种原因工作)，而不是内部内容开始包装。这是一个 jsfiddle 用于以下 HTML 和 CSS。

<div id="container">
    <div id="wrapper">
        <div id="one"></div>
        <div id="two"></div>
    </div>
</div>

#container {
    width: 200px;
    height: 200px;

    position: relative;
    border: 1px solid #000;

    /*white-space: nowrap;*//*Works for chrome, but not for firefox*/
}

#wrapper {
    position: absolute;
    /*left: 100px;*/
}

#one, #two {
    width: 80px;
    height: 80px;
    background-color: #000;

    margin: 10px;
    float: left;
}

如果您取消对 left: 100px; 的注释，您会注意到这两个框被移动了但也包裹了。在 chrome 中，这可以通过在容器上使用 white-space: nowrap; 来解决。但是，它不适用于 Firefox，并且还会影响文本内容。我试过从容器中删除 position: relative; 并使用 Javascript 计算正确的偏移量，但这有点不方便。

编辑:它确实适用于 CSS3 的 transform: translateX(100px) 但我仍然更喜欢 left 变体。

Answer 1

为包装器指定宽度似乎在 Firefox 和 Chrome 中都有效(并且根本不需要 white-space 属性)。 wrapper 的 CSS 变为:

#wrapper {
    position: absolute;
    left: 100px;
    width: 200px;
}