Il margine negativo a sinistra funziona bene, il margine negativo a destra crea la barra di scorrimento

Question

Ho il following fiddle, si noti che se si riduce la larghezza dell'output l'immagine viene nascosta e nessuna barra di scorrimento appare - perfetta.

Se I attempt the same effect on the right, ottengo una barra di scorrimento orizzontale - non perfetta.

Conosco l'articolo overflow: hidden ma questo potrebbe rovinare l'aspetto che sto cercando. Ho anche provato con relative positioning ma questo non ha avvolto il testo (anche se per non dire che è impossibile fare il testo a capo).

Qualcuno sa come posso ottenere quello che voglio?

<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

La ragione per il comportamento che stai osservando è perché troppo pieno orizzontale avviene solo dal lato opposto da dove inizia la contenuto. La direzione del contenuto è LTR nella maggior parte delle lingue, quindi partendo da sinistra, qualsiasi contenuto in eccesso fluirà dal lato destro. Nel caso di margini negativi, tirando un elemento fuori dal bordo sinistro semplicemente si aggancia completamente quella parte dell'elemento, mentre tirandolo fuori dal bordo destro si espande effettivamente l'area del contenuto effettivo del suo contenitore, causando un trabocco.

Per ottenere ciò che si desidera, apply hidden overflow to the body instead of the article in modo che il contenuto esca dall'articolo senza traboccare il corpo, con conseguente creazione della barra di scorrimento orizzontale. Assicurarsi di utilizzare overflow-x invece di overflow in modo da non perdere la barra di scorrimento verticale per il contenuto:

body { 
    overflow-x: hidden; 
} 

Se è necessario impedire lo scorrimento del tutto in contrasto con solo nascondendo la barra di scorrimento, è necessario applicare trabocco ad entrambi html, body, così come sbarazzarsi dei margini del corpo di default, come mostrato here:

html, body { 
    overflow-x: hidden; 
} 

body { 
    margin: 0; 
}