Question

我正在进行设置，其中两个图像和一个文本容器并排使用浮动左边，但是当用户将鼠标悬停时，我还需要使用带有一些文本的叠加div，但这会打破显示。

这是我的HTML代码：

<div class="container">
  <div class="parent-container">
    <div class="child-container">
      <img src="http://blog.hdwallsource.com/wp-content/uploads/2016/02/solid-color-wallpaper-21953-22506-hd-wallpapers.jpg" alt="" />
      <div class="overlay">
        <p>Some text</p>
      </div>
    </div>
    <div class="child-container">
      <img src="http://www.pixelstalk.net/wp-content/uploads/2016/06/Solid-Color-HD-Wallpapers-For-Desktop-768x432.jpg" alt="" />
    </div>
    <div class="child-container-text">
      <p>hhohdoioadoasabs</p>
    </div>
  </div>
</div>

这是我的CSS：

.parent-container {
  position: relative;
  width: 100%;
}

.child-container {
  float: left;
  position: relative;
  width: 30%;
}

.child-container img {
  position: absolute;
  height: 100px;
  width: 100%;
}

.child-container-text {
  background-color: #000;
  float: left;
  height: 100px;
  position: absolute;
  width: 40%;
}

.overlay {
  background-color: #FFF;
  opacity: 0.3;
  position: absolute;
  z-index: 999;
}

以下是CodePen：https://codepen.io/leofontes/pen/ORPJWd?editors=1100

知道为什么他们会堆积？我之前使用了相同的绝对定位技巧来覆盖它并且它起作用了，为什么浮动会打破它？

谢谢

Answer 1

https://jsfiddle.net/37LsfmLa/ 看一个工作示例的小提琴。（对不起，我不知道codepen是如何工作的！）

你的问题很模糊，但我相信这是你正在寻找的。您的代码的问题在于您将图像赋予绝对位置，同时将它们放在浮动div中。标准float行为将折叠任何空div。它会将任何元素缩小到其内容大小。您的元素设置了width，这可以解决该问题，但还有另一个：他们没有身高。结果：他们崩溃了。 - 请注意，position:absolute的元素不计为伸展父母的内容。

你问题出在哪里。你需要给你的div一个静态的高度，以便做出像这样的工作，虽然我想知道为什么你的图像甚至有position:absolute？但是，无论什么漂浮你的船。（我不会在任何应填充元素的图像上使用position:absolute，但这只是我的偏好）

.child-container {
  float: left;
  position: relative;
  width: 30%;
  display: block;
  height: 100px;
}

^以上是修正它的原因。一个简单的height属性。

父级使用float时子级的绝对位置

1 个答案: