क्या नीचे से सीएसएस फ्लोटिंग तत्वों का कोई तरीका है?</p> <pre><code><div> lorem ipsum... <img style="float:left;margin-top:-100px" /> </div> </code></pre> <p>मैं कुछ इस तरह प्राप्त करने के लिए उम्मीद करेंगे:

Question

नीचे HTML को देखते हुए

:

लेकिन क्या मैं वास्तव में हो रही अंत यह है

.Block { 
 
    width: 300px; 
 
    margin: auto; 
 
} 
 

 
.Image { 
 
    width: 150px; 
 
    float: left; 
 
    margin-top: -100px; 
 
}

<div class="Block"> 
 
    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. 
 
    <br><br> 
 
    Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. 
 
    <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" /> 
 
</div>

यहां a pen दिखा रहा है कि कोड कैसा व्यवहार करता है। क्या ऐसा कुछ संभव है? मार्जिन-तल का परिणाम उस व्यवहार में क्यों होता है जो मैं अपेक्षा करता हूं लेकिन मार्जिन-टॉप नहीं करता है?

Answer 1

.Block { 
 
    width: 300px; 
 
    margin: auto; 
 
} 
 

 
.Image { 
 
    width: 100px; 
 
    height:100px; 
 
    float:left; 
 
    margin-right: 1em; 
 

 
}

<div class="Block"> 
 
    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. 
 
    <br><br> 
 
    Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" /> Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. 
 
    
 
</div>

Answer 2

वहाँ कुछ तरीके जिसके माध्यम से आप img tag संरेखित और पाठ के लिए कुछ और टैग को जोड़ने और अपनी पहले img के रूप में परिणाम के रूप में आप अपने प्रश्न में कहा है कि प्राप्त कर सकते हैं कर रहे हैं।

समाधान 1: - हमने 2 <p> tags जोड़ा है। और फिर margin-left से दूसरे <p> tagएनएच-बच्चे() चयनकर्ता का उपयोग करके image+10px की चौड़ाई के बराबर है। और नकारात्मक मूल्य भी img tag को शीर्ष पर लाने और 2nd <p> tag को प्रतिस्थापित करने के लिए जोड़ा जाता है।

.box{ 
 
    width:300px; 
 
    margin:auto; 
 
    position:relative; 
 
} 
 
.box > p:nth-child(2){ 
 
    margin-left:110px; 
 
} 
 
.image{ 
 
    width:100px; 
 
    margin-top:-140px; 
 
    float:left; 
 
}

<div class="box"> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p> 
 
<p> 
 
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est. 
 
</p> 
 
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" /> 
 
</div>

समाधान 2: - हम 2 <p> tags जोड़ लिया है। लेकिन इस बार img tag or .image में कोई नकारात्मक मार्जिन जोड़ा नहीं गया है, बस बाएं फ्लोट करें, और 2nd <p> tag पर कोई मार्जिन-बाएं मान भी नहीं है। वैसे ऐसा इसलिए है क्योंकि हमने float:left for .image और float:right for 2nd <p> tag का उपयोग किया था, इसलिए डिफ़ॉल्ट रूप से वे दोनों गठबंधन हो जाते हैं।

.box{ 
 
    width:300px; 
 
    margin:auto; 
 
    position:relative; 
 
} 
 
.box > p:nth-child(2){ 
 
    float:right; 
 
    width:180px; 
 
    margin:0px; 
 
} 
 
.image{ 
 
    width:100px; 
 
    float:left; 
 
}

<div class="box"> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p> 
 
<p> 
 
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est. 
 
</p> 
 
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" /> 
 
</div>

समाधान 3: - अपने पाठ शैली के लिए किसी भी <p> tag या अन्य टैग जोड़ने की कोई ज़रूरत नहीं है, लेकिन यह अच्छी आदत है, तो आप अपने पाठ के लिए कुछ डिफ़ॉल्ट सौंपा टैग जोड़ें। बस आप में बदलाव करें HTML codes यानी आपके टेक्स्ट के बीच में <img> जोड़ें और फिर यह ठीक काम करता है।

.box{ 
 
    width:300px; 
 
    margin:auto; 
 
    position:relative; 
 
} 
 
.image{ 
 
    width:100px; 
 
    float:left; 
 
    padding:10px 10px 0px 0px; 
 
}

<div class="box"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus. 
 
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" /> 
 
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est. 
 

 
</div>

मार्जिन टॉप (सकारात्मक मूल्य) - जब हम एक तत्व को margin-top positive value आवंटित यह ऊपर से उस तत्व को धक्का और अगर यह है कि तुलना में यह नीचे कुछ तत्व है भी नीचे बिट के लिए कदम ।

मार्जिन टॉप (ऋणात्मक मान) - लेकिन जब हम एक तत्व को margin-top negative value असाइन करते हैं, तो उस बिंदु पर हम उस तत्व एक दूसरे तत्व के एक क्षेत्र है जो अपने आप को पहले से ही खींच यानी सौंपा कुछ गुण है में प्राप्त करने के लिए कर रहे हैं या नीचे शीर्ष पर मजबूर कर रहा है।

यह आपके प्रश्न में भी यही समस्या है, या तो आप HTML कोड i.e. <img> में टेक्स्ट के बीच में परिवर्तन करते हैं या <p> tag जोड़ते हैं और काम करते हैं।