Question

问题：
基本上我有一排内嵌容器，其中包含图像，以及div / image底部带有文本的重叠div。当窗口水平调整时，图像和div会捕捉到它下面的行并保持内联。但是，叠加层不会与它们对齐，直到它被窗口的水平调整大小完全覆盖，然后它才会在行下方捕捉并与容器的其余部分一起显示。

如果您继续水平调整窗口大小，最终叠加div将按下并显示在正确的位置。

问题：
我如何通过CSS，JS或jQuery来实现它，以便当溢出强制容器进入下一行时，overlay div跟随它所在的容器？

＆＃13;

#container {
  position: relative;
  display: inline;
}

#overlay {
  position: absolute;
  display: inline;
  text-align: center;
  height: 20px;
  background-color: gray;
  width: 304px;
  bottom: 0;
}

＆＃13;

<div id="container">
  <div id="overlay">
    Test
  </div>
  <img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>

<div id="container">
  <div id="overlay">
    Test
  </div>
  <img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>

＆＃13;

示例小提琴：https://jsfiddle.net/buqbxgzz/2/

Answer 1

尝试：

#container {
  position: relative;
  display: inline-block;
}

Answer 2

您的代码存在以下问题：

您正在回收标记中的ID。文档中的 ID必须是唯一的。例如，使用.container代替#container。
在叠加层上使用position: absolute和display: inline没有多大意义，因为它会自动设置为阻止级别（即display: block）。
此外，只要您切换到容器元素上的display: inline-block，定位就可以了。原因有点复杂，但是如果你看一下elaborate description of stacking contexts by W3C，你会发现内联级别元素与内联块或块元素相比具有非常不同（可能是违反直觉的）特征。

.container {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  text-align: center;
  height: 20px;
  background-color: gray;
  width: 304px;
  bottom: 0;
}

<div class="container">
  <div class="overlay">
    Test
  </div>
  <img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>

<div class="container">
  <div class="overlay">
    Test
  </div>
  <img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>

请参见固定小提琴：https://jsfiddle.net/buqbxgzz/4/

Answer 3

指定容器的宽度而不是overlay div节点，并为后一个元素指定100％的宽度。这是代码：

#container {
    position: relative;
    display: inline-block;
    width: 304px;
}

#overlay {
    position: absolute;
    display: inline;
    text-align: center;
    height: 20px;
    background-color: gray;
    width: 100%;
    bottom: 0;
}

这是有效的：https://jsfiddle.net/buqbxgzz/5/

编辑：

我刚刚意识到您在代码中使用了重复的ID。 ID必须是唯一的。更改容器并覆盖到类

Answer 4

这是你要找的东西吗？顺便说一下，元素的id属性最好是唯一的。为了应用相同的样式规则，使用了类。

＆＃13;

.container {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  display: inline-block;
  text-align: center;
  height: 20px;
  background-color: gray;
  width: 304px;
  bottom: 0;
}

＆＃13;

<div class="container">
  <div class="overlay">
    Test
  </div>
  <img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>

<div class="container">
  <div class="overlay">
    Test
  </div>
  <img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>

＆＃13;

覆盖与父进行溢出时捕获的div

4 个答案: