Question

我有一个图像和2个div。图像浮动到左侧，div有一些背景颜色。由于某种原因，div的背景显示在图像后面（它是部分透明的）。然而，div中的文本正好显示在图像旁边。

img {
  float: left;
}

div > div {
	background-color: rgb(240, 128, 48);
}

<div>
  <img src="http://pokeapi.co/media/sprites/pokemon/141.png"/>
  <div>Kabutops</div>
  <div>Some info</div>
</div>

我希望橙色背景只在图像的正确位置开始，而不是在它下面。

为什么会这样？它可以用css修复吗？

Answer 1

为什么会这样？

因为这就是float的工作方式。

只有文本，其他图片，跨度等内联内容浮动图像 - 块元素本身不是。

但是有一个简单的解决方法：让他们建立自己的块格式化上下文 - 其中f.e。 overflow:hidden可以实现 - 然后它们也将漂浮在图像周围。

img {
  float: left;
}

div > div {
    overflow: hidden;
	background-color: rgb(240, 128, 48);
}

<div>
  <img src="http://pokeapi.co/media/sprites/pokemon/141.png"/>
  <div>Kabutops</div>
  <div>Some info</div>
</div>

Answer 2

＆＃13;

.test {
  display: flex;
  flex-direction: row;

}
.text {
  flex:2;
 background-color: rgb(240, 128, 48);
}

＆＃13;

<div class="test">

  <img src="http://pokeapi.co/media/sprites/pokemon/141.png"/>
  <div class="text">
  <p>Kabutops</p>
  <p>Some info</p>
  </div>
</div>

＆＃13;

这就是你要找的东西：

浮动图像旁边的div背景显示在图像后面？

2 个答案: