Seltsames Verhalten mit Bild nach innen schwebte Behälter

Question

diese einfache Layout Gegeben:

HTML

<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> 

CSS

.container { 
    height: 20vh; 
} 

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

img { 
    height: 100%; 
} 

---

Ausgabe # 1

Chrome, Firefox und Opera es richtig so anzuzeigen:

IE11 falsch den Text 400 Pixel nach rechts versetzt, auf der Grundlage der natürlichen Breite des Bildes:

---

Issue # 2

Wie Sie das Fenster der Höhe zu erhöhen, sollte der Text st ay geklebt auf der rechten Seite des Bildes. Dies funktioniert in Firefox korrekt.

überlappt jedoch der Text das Bild in Chrome und Opera:

---

das Verhalten Siehe in diesem Fiddle.

Frage: Gibt es einen Stil, den ich hinzufügen kann, der dazu führt, dass sich alle Browser konsistent verhalten?

[Hinweis: Ich entdeckte dies während der Arbeit an this question. Ich dachte, dass ich eine Lösung hatte, bis ich realisierte, dass es außer Firefox in keinem Browser reagierte.]

Answer 1

Das folgende könnte den Trick tun.

Anstatt float zu verwenden, würde ich vorschlagen, CSS-Tabellen zu verwenden.

Wenden Sie display: table an .container an und stellen Sie die Höhe nach Bedarf ein.

Verwenden Sie für die zwei untergeordneten Elemente .imgContainer und .paneldisplay: table-cell und erben Sie die Höhe vom übergeordneten Block.

Ich denke, das ganz in der Nähe zu dem, was Sie benötigen, sollten in allen Browsern (aber ich habe nicht überprüfen ...)

.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>