Ujemny margines-lewy działa poprawnie, ujemny margines-prawy tworzy pasek przewijania

Question

Mam following fiddle, zauważ, że jeśli zmniejszysz szerokość wydruku, obraz zostanie zakryty i nie pojawi się pasek przewijania - idealny.

Jeśli I attempt the same effect on the right, otrzymam poziomy pasek przewijania - nie idealny.

Wiem o artykule overflow: hidden, ale to zrujnowałoby mój wygląd. Próbowałem też z relative positioning, ale to nie zawijało tekstu (chociaż nie można powiedzieć, że zawijanie tekstu jest niemożliwe).

Ktoś wie, w jaki sposób mogę uzyskać to, czego chcę?

<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

Powodem zachowania obserwujesz dlatego poziome przepełnienie odbywa się tylko z przeciwnego brzegu, skąd zaczyna treści. Kierunek treści to LTR w większości języków, więc począwszy od lewej, każda przepełniona treść będzie wypływać z prawej strony. W przypadku ujemnych marginesów, wyciągnięcie elementu z lewej krawędzi powoduje po prostu całkowite przycięcie tej części elementu, natomiast wyciągnięcie jej z prawej krawędzi faktycznie rozszerza efektywny obszar zawartości pojemnika, powodując przepełnienie.

Aby uzyskać to, co chcesz, apply hidden overflow to the body instead of the article, aby zawartość przepełniała artykuł bez przepełnienia treści, powodując utworzenie poziomego paska przewijania. Należy używać overflow-x zamiast overflow więc nie stracić pionowy pasek przewijania dla treści:

body { 
    overflow-x: hidden; 
} 

Jeśli chcesz uniknąć przewijania w całości, a nie tylko ukrywanie paska przewijania, musisz zastosować przepełnienie zarówno html, body, a także pozbycie marginesie ciała domyślnych, jak pokazano here:

html, body { 
    overflow-x: hidden; 
} 

body { 
    margin: 0; 
}