图像在浮动容器

Question

鉴于这种简单的布局：

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

<小时/> 问题＃1

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

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

<小时/> 问题＃2

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

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

<小时/> 请参阅此 Fiddle 。

中的行为

问题：我可以添加哪种样式会导致所有浏览器的行为一致吗？

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

Answer 1

以下可能会成功。

我建议使用CSS表格，而不是使用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>