html - float 容器内图像的奇怪行为

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

以下可能会成功。

我建议不要使用 float，而是使用 CSS 表格。

将display: table应用于.container，并根据需要设置高度。

.imgContainer 和.panel 这两个子元素，使用display: table-cell 并继承父 block 的高度.

我认为这非常接近您的需要，应该适用于所有浏览器(不过我没查...)

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