सीएसएस में फोटो के आगे पाठ संरेखित

Question

मुझे आश्चर्य है कि तस्वीर के दाईं ओर पाठ संरेखित करने का कोई तरीका है, और HTML और CSS का उपयोग करके छवि समाप्त होने के बाद भी टेक्स्ट को उसी "बॉक्स" में रखें। जो मैं पूरा करने का प्रयास कर रहा हूं उसका एक त्वरित "आरेख" नीचे है:

------- -------- 
------- -------- 
-Image- - Text - 
------- -------- 
------- -------- 
     -------- 
     -------- 

किसी भी मदद के लिए धन्यवाद!

Answer 1

यदि आप टेक्स्ट div पर चौड़ाई निर्धारित करते हैं और छवि और टेक्स्ट दोनों को छोड़कर फ़्लोट करते हैं (फ्लोट: बाएं), तो यह चाल चलनी चाहिए। दोनों के बाद फ्लोट साफ़ करें।

<div style="float:left; width:200px"> 
    <img/> 
</div> 

<div style="float:left; width:200px"> 
    Text text text 
</div> 

<div style="clear:both"></div> 

Answer 2

टेक्स्ट को किसी प्रकार के कंटेनर में रखें, और उस कंटेनर को फ्लोट की गई छवि के बगल में तैरें।

<img src="..." style="float:left; width: 200px;" /> 

<div style="float:left; width: 400px;"> 
    <p>Bla bla...</p> 
    <p>Bla bla...</p> 
    <p>Bla bla...</p> 
</div> 

आप उन दो तत्वों के आसपास कुछ कंटेनर की जरूरत है स्वचालित रूप से दो तत्वों जारी की उच्चतम करने के लिए उसकी ऊंचाई फिट करने के लिए आपको लगता है कि कंटेनर पर एक overflow: hidden सेट कर सकते हैं,: निम्नलिखित कोड नमूना आप से पता चलना चाहिए। इसे आईई 6 में भी काम करने के लिए, आपको इसे overflow: auto पर वापस करने की आवश्यकता होगी और height: 1px जैसे कुछ विचित्र जोड़ें।

Answer 3

आप आम तौर पर पाठ के लिए एक div या p तत्व बना सकते हैं और दोनों छवि देने के लिए और पाठ एक float: left होगा। सटीक कार्यान्वयन अन्य मानकों पर निर्भर करता है जैसे चौड़ाई तय की गई है, आपका लेआउट कैसा दिखता है, और इसी तरह।

Answer 4

डेमो:http://jsbin.com/iyeja/5

<div id="diagram"> 
      <div class="separator"></div> 
      <div class="separator"></div> 

      <div id="text_image_box"> 
       <span class="image"><img src="http://l.yimg.com/g/images/home_photo_megansoh.jpg" alt="" /></span><span class="text"><p>some text</p></span> 
       <div class="clear"></div> 
      </div> 

      <div class="separator"></div> 
      <div class="separator"></div> 
      <div class="separator"></div> 
      </div> 

    <style> 
     /* JUST SOME FANCY STYLE*/ 
     #diagram { 
     width:300px; 
     border:1px solid #000; 
     padding:10px; 
     margin:20px; 
     } 

     .separator { 
     height:2px; 
     width:300px; 
     border-bottom:1px dashed #333; 
     display:block; 
     margin:10px 0; 
     } 

     /* MAIN PART */ 
     #text_image_box { 
     width:300px; 
     margin:0 auto; 
     padding:0 
     } 

     .image { 
     float:left; 
     width:180px; 
     height:300px; 
     overflow:hidden; 
     margin:0 auto; 
     } 
     .text { 
    float:right; 
    width:100px; 
    padding:0; 
    margin:0 auto; 
    } 
    .text p { 
    margin:0; 
    padding: 0 5px; 
    } 
     .clear { 
     clear:both 
     } 
     </style>