css3 - CSS to stop text wrapping under image -


मेरे पास निम्न मार्कअप है:

  & lt; li id ​​= "CN2787" & gt; & Lt; img वर्ग = "fav_star" src = "चित्र / एफएएएपी" & gt; & Lt; span & gt; पाठ, पाठ और अधिक पाठ & lt; / span & gt; & Lt; / li & gt;   

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

मैंने सफलता के बिना निम्नलिखित की कोशिश की है: < प्री> ली स्पॅन {चौड़ाई: 100px; मार्जिन-बाएं: 20px}। Fav_star {width: 20px}

मैंने भी फ्लोट: सही की कोशिश की।

धन्यवाद।

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

  IMG पाठ यहां शुरू होता है और जारी रखता है ... और रैप यहां शुरू होता है।   

ऐसा नहीं है:

  IMG पाठ यहां से शुरू होता है और जा रहा रहता है ... और लपेटें छवि के लिए बचे हुए अंतरिक्ष में शुरू होती है।    

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

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

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

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

  डिस्प्ले: ब्लॉक;   

एक और तरीका है, जो आमतौर पर अधिक समझ में आता है, और

तत्व को आपके & lt; span & gt;

  & lt; li id ​​= "CN2787" & gt; & Lt; img वर्ग = "fav_star" src = "चित्र / एफएएएपी" & gt; & Lt; p & gt; & Lt; span & gt; पाठ, पाठ और अधिक पाठ & lt; / span & gt; & Lt; / p & gt; & Lt; / li & gt;   

चूंकि & lt; p & gt; एक ब्लॉक तत्व है, तो आप कुछ भी बदलने के बिना सीएसएस का उपयोग कर अपनी चौड़ाई निर्धारित कर सकते हैं। < / P>

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

  li पी {चौड़ाई: 100px; मार्जिन-बाएं: 20px}। Fav_star {width: 20px; फ्लोट: बाएं}   

पीएस छवि पर float: left के बजाय, आप float: right पर li p डाल सकते हैं, लेकिन उस स्थिति में, आपको < कोड> टेक्स्ट-संरेखित करें: बाएं सही ढंग से पाठ को पुन: करने के लिए।

PSS यदि आप & lt; p & gt; तत्व को जोड़ने के पहले समाधान के साथ आगे बढ़ते हैं, तो आपका सीएसएस ऐसा दिखना चाहिए: <पूर्व> ली स्पैन {width: 100px; मार्जिन-बाएं: 20px; प्रदर्शन: ब्लॉक}। Fav_star {width: 20px; फ्लोट: बाएं}

Comments