नकारात्मक margin-left ठीक काम करता है, नकारात्मक मार्जिन-सही स्क्रॉलबार

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> 

सीएसएस

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

व्यवहार आप देख रहे हैं के लिए कारण यह है कि क्षैतिज अतिप्रवाह केवल जहां से सामग्री शुरू होता है विपरीत किनारे से जगह लेता है। सामग्री की दिशा अधिकांश भाषाओं में एलटीआर है, इसलिए बाएं से शुरू होने पर, किसी भी बहती हुई सामग्री दाएं तरफ से बहती है। नकारात्मक मार्जिन के मामले में, बाएं किनारे से बाहर एक तत्व खींचने से तत्व के उस हिस्से को पूरी तरह से क्लिप किया जाता है, जबकि दाएं किनारे से बाहर खींचते समय वास्तव में इसके कंटेनर के प्रभावी सामग्री क्षेत्र का विस्तार होता है, जिससे अतिप्रवाह होता है।

आप क्या चाहते हैं, apply hidden overflow to the body instead of the article इसलिए सामग्री भी शरीर बह निकला, क्षैतिज स्क्रॉलबार में जिसके परिणामस्वरूप बनाया जा रहा बिना लेख overflows प्राप्त करने के लिए। overflow के बजाय overflow-x उपयोग करें ताकि आप अपनी सामग्री के लिए खड़ी स्क्रॉलबार खोना नहीं है सुनिश्चित करें:

body { 
    overflow-x: hidden; 
} 

आप स्क्रॉल पूरी तरह से के रूप में सिर्फ स्क्रॉलबार छुपा के लिए विरोध को रोकने के लिए की जरूरत है, तो आप अतिप्रवाह लागू करना होगा दोनों html, body करने के साथ-साथ दिखाया गया है here, डिफ़ॉल्ट शरीर मार्जिन से छुटकारा पाने:

html, body { 
    overflow-x: hidden; 
} 

body { 
    margin: 0; 
}