13

我有以下小提琴，请注意，如果您使输出的宽度更小，则图像会被覆盖并且不会出现滚动条 - 完美。

如果我在右侧尝试相同的效果，我会得到一个水平滚动条 - 并不完美。

我知道overflow: hidden这篇文章，但这会破坏我想要的外观。我也尝试了相对定位，但这并没有换行文本（尽管并不是说不可能让文本换行）。

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

<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;
}
4

1 回答 1

17

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

为了得到你想要的，将隐藏的溢出应用到正文而不是文章，这样内容就会溢出文章而不会溢出正文，从而创建水平滚动条。请务必使用overflow-x，而不是overflow这样您就不会丢失内容的垂直滚动条：

body {
    overflow-x: hidden;
}

如果您需要完全阻止滚动而不是仅仅隐藏滚动条，则需要对两者都应用溢出html, body，以及摆脱默认的正文边距，如下所示：

html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
}
于 2013-10-17T13:15:48.770 回答