एक div

Question

खींचने के लिए छवि प्राप्त करना DIV कक्षा की ऊंचाई को बढ़ाने के लिए मुझे एक छवि कैसे मिल सकती है?

वर्तमान में यह इस तरह दिखता है:

http://i36.tinypic.com/34osrdg.png

हालांकि, मैं चाहते हैं DIV फैला है ताकि छवि ठीक से फिट बैठता है, लेकिन मैं छवि का आकार नहीं करना चाहती।

.product1 { 
    width: 100%; 
    padding: 5px; 
    margin: 0px 0px 15px -5px; 
    background: #ADA19A; 
    color: #000000; 
    min-height: 100px; 
} 

सीएसएस छवि पर लागू किया जा रहा:

.product{ 
    display: inline; 
    float: left; 
} 

तो, कैसे मैं इसे ठीक कर सकते

यहाँ DIV (ग्रे बॉक्स) के लिए सीएसएस है?

Answer 1

जोड़े overflow:auto;.product1

Answer 2

display:inline 
float:left 

फ्लोटिंग माता-पिता के लिए चौड़ाई बच्चे द्वारा बढ़ाया नहीं जा सकता है, नाव के बिना छवि रखने की कोशिश आपकी समस्या

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

अद्यतन: अपना लिंक देखने के बाद आपकी ऊंचाई समस्या प्रदर्शित होने के बाद, क्योंकि फ्लोट को साफ़ नहीं किया जा रहा है।

Answer 3

छवि के बाद मार्कअप में, <div style="clear:left"/> जैसे कुछ डालें। थोड़ा गन्दा, लेकिन यह मुझे मिला सबसे आसान तरीका है।

और जब आप इसमें हों, तो उस छवि पर थोड़ी सी मार्जिन डालें ताकि टेक्स्ट इसके खिलाफ न हो।

Answer 4

@ जॉन Millikin मानते हुए सही, कोड

.product + * { clear: left; } 

लिए मजबूर कर रहा मैन्युअल div के बाद कोड को समायोजित करने के बिना एक ही बात करने के लिए पर्याप्त होगा है।

Answer 5

एक करने के लिए चाल आप उपयोग कर सकते हैं छिपा को <div> के अतिप्रवाह गुण सेट करने के लिए है। यह ब्राउज़र को बॉक्स के भौतिक आकार की गणना करने के लिए मजबूर करता है, और अस्थायी छवि के साथ अजीब ओवरलैप समस्या को हल करता है। यह आपको किसी भी अतिरिक्त HTML मार्कअप में जोड़ने से बचाएगा।

यहाँ कैसे वर्ग दिखना चाहिए:

.product1 { 
    width: 100%; 
    padding: 5px; 
    margin: 0px 0px 15px -5px; 
    background: #ADA19A; 
    color: #000000; 
    min-height: 100px; 
    overflow: hidden; 
} 

Answer 6

यह मेरे लिए clearfix के लिए एक नौकरी की तरह दिखता है ...

Answer 7

निम्नलिखित का प्रयास करें:

.Strech 
{ 
    background:url(image.jpg); 
    background-size:100% 100%; 
    background-repeat:no-repeat; 

    width:500px; 
    height:500px; 
}