Question

我遇到了一个令人讨厌的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版本。

Answer 1

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

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

无内容包装的绝对定位

1 个答案: