छवि के तहत पाठ रैपिंग को रोकने के लिए सीएसएस

Question 1

मेरे पास निम्नलिखित मार्कअप हैं:

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

मैं यह चाहता हूं कि यदि पाठ लपेटता है, तो यह छवि के लिए 'कॉलम' में नहीं जाता है। मुझे पता है कि मैं इसे एक table(जो मैं कर रहा था) के साथ कर सकता हूं लेकिन यह इस कारण से काम करने योग्य नहीं है ।

मैंने सफलता के बिना निम्नलिखित की कोशिश की है:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

मैंने भी कोशिश की float: right।

धन्यवाद।

संपादित करें: मैं इसे इस तरह देखना चाहता हूं:

IMG   Text starts here and keeps going... and
      wrap starts here.

इस तरह नहीं:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

Question 2

चूंकि यह प्रश्न बहुत सारे विचार प्राप्त कर रहा है और यह स्वीकृत उत्तर था, इसलिए मुझे निम्नलिखित अस्वीकरण जोड़ने की आवश्यकता महसूस हुई:

यह उत्तर ओपी के प्रश्न (उदाहरणों में चौड़ाई निर्धारित किया गया था) के लिए विशिष्ट था। जब यह काम करता है, तो आपको प्रत्येक तत्व, छवि और पैराग्राफ पर एक चौड़ाई की आवश्यकता होती है। जब तक आपकी आवश्यकता नहीं है, मैं जो कॉनलिन के समाधान का उपयोग करने की सलाह देता हूं जो इस प्रश्न पर एक और उत्तर के रूप में पोस्ट किया गया है।

spanतत्व एक इनलाइन तत्व, आप सीएसएस में इसकी चौड़ाई परिवर्तित नहीं कर सकता है।

आप अपनी अवधि में निम्न सीएसएस जोड़ सकते हैं ताकि आप इसकी चौड़ाई बदल सकें।

display: block;

एक और तरीका, जो आमतौर पर अधिक समझ में आता है, वह है <p>अपने माता-पिता के रूप में एक तत्व का उपयोग करना <span>।

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

चूंकि <p>एक blockतत्व है, आप सीएसएस का उपयोग करके इसकी चौड़ाई निर्धारित कर सकते हैं, बिना कुछ भी बदलने के लिए।

लेकिन दोनों ही मामलों में, चूंकि अब आपके पास एक ब्लॉक एलिमेंट है, आपको इमेज को फ्लोट करने की आवश्यकता होगी ताकि आपका टेक्स्ट आपकी इमेज से नीचे न जाए।

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

पुनश्च के बजाय float:leftछवि पर, आप भी रख सकते हैं float:rightपर li pलेकिन इस मामले में, आप भी आवश्यकता होगी text-align:leftसही ढंग से पाठ फिर से संगठित करना है।

PSS यदि आप <p>तत्व नहीं जोड़ने के पहले समाधान के साथ आगे बढ़े हैं , तो आपका सीएसएस ऐसा दिखना चाहिए:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

Question 3

इस समस्या के लिए बहुत सरल उत्तर जो बहुत से लोगों को पकड़ता है:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

उदाहरण देखें: http://jsfiddle.net/vandigroup/upKGe/132/

Question 4

जो लोग कुछ पृष्ठभूमि जानकारी चाहते हैं, उनके लिए यहां एक छोटा लेख है जो बताता है कि क्यों overflow: hiddenकाम करता है। इसका तथाकथित ब्लॉक फॉर्मेटिंग संदर्भ के साथ करना है । यह W3C की कल्पना का हिस्सा है (यानी हैक नहीं है) और मूल रूप से ब्लॉक-प्रकार के प्रवाह के साथ एक तत्व द्वारा कब्जा कर लिया गया क्षेत्र है।

जब भी इसे लागू किया जाता है, overflow: hiddenएक नया ब्लॉक स्वरूपण संदर्भ बनाता है । लेकिन यह उस व्यवहार को ट्रिगर करने में सक्षम एकमात्र संपत्ति नहीं है। सिडनी वेब एप्स ग्रुप से फियोना चान द्वारा एक प्रस्तुति का उद्धरण :

फ्लोट: बाएं / दाएं

अतिप्रवाह: छिपा हुआ / ऑटो / स्क्रॉल

डिस्प्ले: टेबल-सेल और टेबल-संबंधित मान / इनलाइन-ब्लॉक

स्थिति: पूर्ण / निश्चित

Question 5

यदि आप margin-leftएक spanतत्व पर काम करना चाहते हैं तो आपको इसे display: inline-blockया display:blockसाथ ही बनाना होगा ।

Question 6

display:flexपाठ के लिए सेटिंग ने मेरे लिए काम किया।

Question 7

छवि और अवधि के चारों ओर एक लपेटें और सीएसएस को निम्न में जोड़ें जैसे:

एचटीएमएल

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

सीएसएस

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

कम से

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }