Html 浮动容器中图像的奇怪行为

鉴于这种简单的布局：

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>

---

问题#1

Chrome、Firefox和Opera正确显示如下：

根据图像的自然宽度，IE11将文本错误地向右放置400像素：

---

第2期

当您增加窗口的高度时，文本应保持粘在图像的右侧。这在Firefox中正常工作

但是，文本与Chrome和Opera中的图像重叠：

---

请参见此中的行为

问题：我是否可以添加一种风格，使所有浏览器行为一致

---

[注意：我在工作时发现了这一点。我以为我有一个解决方案，直到我意识到它在除Firefox之外的任何浏览器中都没有响应。]

以下可能就是解决方法

我建议使用CSS表，而不是使用

float

将

display:table

应用于

.container

，并根据需要设置高度

对于两个子元素，

.imgContainer

和

.panel

，使用

display:table cell

并从父块继承高度

我认为这是非常接近你需要的，应该适用于所有浏览器 （但我没有检查…）

.container{
高度：20vh；
显示：表格；
}
.imgContainer、.panel{
显示：表格单元格；
身高：继承；
垂直对齐：顶部；
}
img{
垂直对齐：顶部；
身高：继承；
}

这应该始终保持在图像的右侧。

是否可以选择使用

背景图像

而不是实际图像？@Cheslab，因为这不是我的代码，我不确定这是否是一个选项。但是这能解决问题吗？如果你没有图像，IE就不知道它的原始宽度，它应该把文本放在图像后面。这有一个缺点-您必须设置

.imgContainer

的宽度，我相信这会自行解决问题。我只是尝试添加

宽度：20vh到此div和IE现在可以正确显示所有内容了感谢@Cheslab，显式设置宽度可能可以解决所有浏览器的问题。但是它不再有响应，因为你使用的是
vh
。换句话说，我不清楚你在说什么want@RickHitchcock请检查更新，我认为非常接近。这在所有浏览器中都修复了它！我本以为
height:100%
会做与
height:inherit
相同的事情，但在这种情况下不会。有趣！
.container {
  height: 20vh;
}

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

img {
  height: 100%;
}