1

我遇到了一个我似乎无法解决的讨厌的 CSS 问题。我想将包装器放置在具有left属性的容器内（在正方向上；由于某种原因，负方向似乎起作用），而里面的内容却没有开始包装。这是以下 HTML 和 CSS的jsfiddle 。

<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变体。

4

1 回答 1

2

为包装器指定宽度似乎在 Firefox 和 Chrome 中都有效（并且根本不需要该white-space属性）。CSS forwrapper变为：

#wrapper {
    position: absolute;
    left: 100px;
    width: 200px;
}
于 2013-06-19T12:24:32.343 回答