अजीब व्यवहार के अंदर कंटेनर

Question

जारी देखते हुए इस सरल लेआउट:

एचटीएमएल

<div class="container"> 
    <div class="imgContainer"> 
    <img src="http://placehold.it/400x400"> 
    </div> 
    <div> 
    This should always stay to the right of the image. 
    </div> 
</div> 

सीएसएस

.container { 
    height: 20vh; 
} 

.imgContainer { 
    float: left; 
    height: 100%; 
} 

img { 
    height: 100%; 
} 

---

अंक # 1

क्रोम, फायरफॉक्स, और ओपेरा सही ढंग से इसे इस तरह प्रदर्शित:

IE11 गलत तरीके से सही करने के लिए पाठ 400 पिक्सेल डालता है, छवि के प्राकृतिक चौड़ाई के आधार पर:

---

अंक # 2

आप विंडो की ऊंचाई बढ़ाने के रूप में, पाठ करना चाहिए सेंट एई छवि के दाईं ओर चिपके हुए। यह फ़ायरफ़ॉक्स में सही ढंग से काम करता है।

हालांकि, पाठ क्रोम और ओपेरा में छवि ओवरलैप होता है:

---

इस Fiddle में व्यवहार देखें।

प्रश्न: क्या कोई ऐसी शैली है जिसे मैं जोड़ सकता हूं जिससे सभी ब्राउज़र लगातार व्यवहार कर सकें?

[नोट: this question पर काम करते समय मैंने यह खोज लिया। मैंने सोचा कि मेरे पास समाधान था, जब तक मुझे एहसास हुआ कि यह फ़ायरफ़ॉक्स को छोड़कर किसी भी ब्राउज़र में उत्तरदायी नहीं था।]

Answer 1

निम्नलिखित चाल चल सकती है।

float का उपयोग करने के बजाय, मैं सीएसएस टेबल का उपयोग करने का सुझाव दूंगा।

display: table.container पर लागू करें और आवश्यकतानुसार ऊंचाई सेट करें।

दो बच्चे तत्वों के लिए, .imgContainer और .panel, display: table-cell का उपयोग करें और माता पिता के ब्लॉक से ऊंचाई प्राप्त करती हैं।

मुझे लगता है कि यह बहुत है कि तुम क्या जरूरत है, सभी ब्राउज़रों में काम करना चाहिए के करीब है (लेकिन मैं जाँच नहीं की थी ...)

.container { 
 
    height: 20vh; 
 
    display: table; 
 
} 
 
.imgContainer, .panel { 
 
    display: table-cell; 
 
    height: inherit; 
 
    vertical-align: top; 
 
} 
 
img { 
 
    vertical-align:top; 
 
    height: inherit; 
 
}

<div class="container"> 
 
    <div class="imgContainer"> 
 
    <img src="http://placehold.it/400x400"> 
 
    </div> 
 
    <div class="panel"> 
 
    This should always stay to the right of the image. 
 
    </div> 
 
</div>