मैं अपनी सामग्री को फिट करने के लिए एक डीआईवी फैलाव कैसे सुनिश्चित कर सकता हूं?

Question

मेरे पास यह HTML है:

<div 
    class="currentDesignDiv" 
    style="margin-bottom:5px;"> 
    <div> 
    <img 
     alt="Thumbnail" 
     src="http://www.propertyware.com/templates/ 
     <bean:write name="currentTemplate" property="primaryKey"/> 
     /thumb.gif"/> 
    </div> 
    <div> 
    <table> 
     <tr> 
     <th>Your Current Design: </th> 
     <td>Template #: 
      <bean:write name="currentTemplate" property="primaryKey"/> 
     </td> 
     </tr> 
     <tr> 
     <th>Last Updated: </th> 
     <td> 
      <bean:write name="currentTemplate" property="modifiedByAsString"/> 
     </td> 
     </tr> 
     <tr> 
     <th>Total Pages: </th> 
     <td> 
      <bean:write name="numberOfPages"/> 
     </td> 
     </tr> 
    </table> 
    </div> 

इस सीएसएस द्वारा स्टाइल किया जा रहा है:

 .currentDesignDiv{ 
    background-color:#e7e7e7; 
    border:1px solid #9c9c9c; 
    padding:5px; 
    width:100%; 
    min-width:860px; 
} 
.currentDesignDiv div{ 
    float:left; 
    width:33%; 
} 
.currentDesignDiv div table{ 
    font-size:9pt; 
    text-align:left; 
    margin:17px; 
} 
.currentDesignDiv div:first-child img{ 
    margin:17px; 
    width:80px; 
} 

यह मेरे बड़े मॉनिटर पर ठीक दिखता है, लेकिन जब मैं अपने छोटे मॉनिटर में बदल जाता हूं तो सही-div , जिसमें इसके अंदर एक छवि है, पैरेंट div के बाहर तैरती है। क्या किसी के पास इसका समाधान है?

Answer 1

बाहरी div के लिए निर्धारित

overflow: auto; 

। इससे आपके माता-पिता के विभाजन में वृद्धि होनी चाहिए, भले ही उसके बच्चों की एक फ्लोट संपत्ति हो। (आईई इस के साथ कुछ समस्या है, लेकिन कुछ गद्दी द्वारा निर्धारित किया जा सकता है)

Answer 2

पैरेंट div भी फ़्लोट करें।

इसका मतलब यह होगा कि तैरने वाले बाल तत्व इससे बाहर नहीं निकलेंगे।

Answer 3

शायद बाहरी div इस सीएसएस देने की कोशिश ...

display: inline-ब्लॉक;

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

बाहरी div इनलाइन-ब्लॉक बनाना अनिवार्य रूप से आंतरिक divs बाहरी div में कुछ वास्तविक स्थान ले जाएगा।

Answer 4

मैं आमतौर पर दे:

अतिप्रवाह: छिपे हुए;

मुझे समस्या थी जब मैं ओवरफ़्लो देता हूं: ऑटो; कभी-कभी बाहरी div scrollbar प्रदर्शित कर सकता है।