इसके अंदर सामग्री को लपेटने के लिए div को लंबवत रूप से विस्तारित करने के लिए कैसे करें?

Question

मेरे पास एक div है जो कई छवियों को लपेटता है जो गतिशील रूप से उत्पन्न होते हैं। मुझे नहीं पता कि छवियों की सूची कितनी अधिक है। मेरी समस्या वह div है जिसमें गतिशील रूप से जेनरेट की गई छवियां होती हैं, ऐसा व्यवहार नहीं करती है जैसे यह किसी भी सामग्री का आवास है - मैं चाहता हूं कि यह छवियों की सूची की ऊंचाई तक विस्तारित हो। प्रत्येक छवि स्वयं एक div में लपेटा जाता है।

.block { padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; } 

यह मार्कअप गतिशील (में से एक) के लिए उत्पन्न है छवियों:

यह आवरण div है

<div class="block"> 
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="45.jpg" BORDER="0"/></div> 
..... 

मैं block div के साथ नीचे का विस्तार करने के कैसे मिलता है इमेजिस?

धन्यवाद

Answer 1

आप जिस समस्या को देख रहे हैं वह तब होता है जब आप तत्व को फ़्लोट करते हैं, जो इसे तत्वों के सामान्य प्रवाह से बाहर ले जाता है (सामान्य प्रवाह से मेरा मतलब है कि तत्व स्टाइल के साथ दिखाई नहीं देंगे)। जब आप किसी तत्व को फ़्लोट करते हैं, तो अन्य तत्व अभी भी सामान्य प्रवाह में इसे अनदेखा करेंगे और इसके लिए जगह नहीं बनायेंगे, यही कारण है कि आपका block div आपकी छवि की पूरी ऊंचाई का विस्तार नहीं करता है।

1) block वर्ग के लिए नियम overflow: hidden; जोड़ें::

कुछ अलग समाधान कर रहे हैं को साफ करता है कि

.block { overflow: hidden; padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; } 

2) अपनी छवि के बाद एक तत्व जोड़ें चल:

<div class="block"> 
    <div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="images/login1.png" BORDER="0"/></div> 
    <div style="clear: both;"></div> 
</div> 

दोनों काम करेंगे, लेकिन मैं पहला समाधान पसंद करता हूं। छवि शैली से

Answer 2

मैं एक div टैग विस्तृत होने वाली (क्षैतिज और खड़ी) निर्भर करता है कि मैं क्या उस में होता है। मेरे पास है:

<table style="margin-left:1em; border:2px solid #000000; background-color:#f2f2f2; padding:1px; float:center; clear:right; font-size:85%;"> 

Answer 3

अपने सीएसएस फ़ाइल में इस जोड़ें::

.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;} 
/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */ 

और "group" जोड़ने मेरी सभी जानकारी धारण करने के लिए

<div id="summary" style="float:right;margin:5px 5px 0;" ALIGN="right"> 

मैं भी भीतर एक मेज डाल कक्षा block div ताकि फ्लोट साफ़ हो जाए:

<div class="block group"> 
... 

Answer 4

निकालें float:left और height:Auto ब्लॉक शैली (कंटेनर शैली) में जोड़ें display:inline-block; ब्लॉक शैली से