html - 负 margin-left 工作正常，负 margin-right 创建滚动条

Question

我有 following fiddle ，请注意，如果您使输出的宽度变小，图像将被覆盖并且不会出现滚动条 - 完美。

如果我attempt the same effect on the right ，我得到一个水平滚动条 - 不完美。

我知道文章中的 overflow: hidden 但这会破坏我想要的外观。我也试过 relative positioning但这并没有换行文本(尽管并不是说不可能使文本换行)。

谁知道我怎样才能得到我想要的东西？

<article>
    <h1>Lorem ipsum dolor</h1>

    <img src="http://lorempixel.com/500/300" class="right" />

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet diam in neque venenatis semper et et dui. Nam risus ante, condimentum id neque ac, faucibus molestie purus. Pellentesque viverra ultrices lacus, sed vulputate diam lobortis fermentum.</p>
    <p>Sed tincidunt tortor in lectus imperdiet bibendum. Nullam pellentesque commodo lacus, eget consequat erat convallis ut. Donec scelerisque urna urna, at aliquam nulla sagittis eu. Proin sit amet sagittis est. Phasellus tempor orci sem, id facilisis nibh tincidunt non.</p>

    <h2>Sit amet</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet diam in neque venenatis semper et et dui. Nam risus ante, condimentum id neque ac, faucibus molestie purus. Pellentesque viverra ultrices lacus, sed vulputate diam lobortis fermentum.</p>    
    <p>Sed tincidunt tortor in lectus imperdiet bibendum. Nullam pellentesque commodo lacus, eget consequat erat convallis ut. Donec scelerisque urna urna, at aliquam nulla sagittis eu. Proin sit amet sagittis est. Phasellus tempor orci sem, id facilisis nibh tincidunt non.</p>
</article>

CSS

article {
    margin: 0 auto;
    max-width: 500px;
}

img.left {
    margin: 0 20px 20px -300px;
    float: left;
}

img.right {
    margin: 0 -300px 20px 20px;
    float: right;
}

Answer 1

您所观察到的行为的原因是因为水平溢出仅发生在内容开始处的相对边缘。大多数语言的内容方向都是 LTR，所以从左边开始，任何溢出的内容都会从右边流出。在负边距的情况下，将元素从左边缘拉出只会完全剪切该元素的那部分，而将其从右边缘拉出实际上会扩展其容器的有效内容区域，从而导致溢出。

为了得到你想要的，apply hidden overflow to the body instead of the article因此内容会溢出文章而不会溢出正文，从而导致创建水平滚动条。请务必使用 overflow-x 而不是 overflow，这样您就不会丢失内容的垂直滚动条:

body {
    overflow-x: hidden;
}

如果你需要完全防止滚动而不是仅仅隐藏滚动条，你需要对 html, body 应用溢出，以及去掉默认的主体边距，如显示here :

html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
}