Dziwne zachowanie z obrazem w środku unosił pojemnik

Question

Biorąc pod uwagę ten prosty układ:

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%; 
} 

---

Issue # 1

Chrome, Firefox i Opera poprawnie wyświetlić go tak:

IE11 nieprawidłowo pakuje tekst 400 pikseli w prawo, na podstawie naturalnej szerokości obrazu:

---

Issue # 2

Jak zwiększyć wysokość tego okna, tekst powinien st ay przyklejone po prawej stronie obrazu. Działa to poprawnie w Firefoksie.

Jednak tekst zachodzi na obraz w Chrome i Opera:

---

Zobacz zachowanie w tym Fiddle.

Pytanie: Czy istnieje styl, który mogę dodać, aby wszystkie przeglądarki zachowywały się konsekwentnie?

[Uwaga: Odkryłem to podczas pracy nad this question. Myślałem, że mam rozwiązanie, dopóki nie zorientowałem się, że nie reaguje na żadną przeglądarkę z wyjątkiem Firefoksa.]

Answer 1

Poniższe mogą załatwić sprawę.

Zamiast korzystać z float, proponuję użyć tabel CSS.

Zastosuj display: table do .container i ustaw wysokość w razie potrzeby.

Dla dwóch elementów podrzędnych, .imgContainer i .panel, należy użyć display: table-cell i dziedziczyć wysokość z bloku nadrzędnego.

myślę, że to jest całkiem blisko tego, co trzeba, powinien działać we wszystkich przeglądarkach (ale nie sprawdzałem ...)

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