Question

如何使用标签名称作为链接在每个图像的顶部制作多个图像？我可以在图片顶部制作带有标签名称的仅一个图片，但不能使用其他图像。不知何故，当我复制整个div（包含img和标记的div）时，它不会在其他图像上显示标记。

我已尝试：position: relative为父div，position: absolute为标记（子div），制作图像float: left。我也曾试图“坚持”＃34;孩子div与其父母。我尝试为每个项目添加div和class：图像，图像容器，标记，标记......

＆＃13;

.container {
  position: relative;
  width: 400px;
  height: 400px;
}

.container img {
  width: 100%;
  /*I've tried with px, doesn't make a difference*/
  float: left;
  /*I've also tried adding a class for img and position: absolute*/
}

.nameTag {
  width: 100%;
  height: 50px;
  position: absolute;
  background-color: gray;
}

.nameText {
  color: white;
}

＆＃13;

<div class="container">
  <img src="assets/images/img1.png" />
  <div class="nameTag"><a href="" class="nameText">Mobile App</a></div>
</div>
<div class="container">
  <img src="assets/images/img2.png" />
  <div class="nameTag"><a href="" class="nameText">Mobile App</a></div>
</div>
<div class="container">
  <img src="assets/images/img3.png" />
  <div class="nameTag"><a href="" class="nameText">Mobile App</a></div>
</div>

＆＃13;

Answer 1

不确定这是完全您要查找的内容，但这是我在CSS中更改的内容：

.container {
    position: relative;
    display: inline-block; //allowed images to float
    width: 400px;
    height: 400px;
}

.nameTag {
    width: 100%;
    height: 50px;
    position: absolute;
    background-color: gray;
    top: 100px; //positioned about half way down the image
    text-align: center; //center the link text
}

以下是CodePen的链接供您查看。让我知道！

Answer 2

尝试将您的浮动更改为＆＃34;无＆＃34;或将其复制/粘贴到您的html / css文件中。

希望这有帮助。

＆＃13;

.container {
  position: relative;
  width: 400px;
  height: 400px;
}

.container img {
  width: 100%;
  /*I've tried with px, doesn't make a difference*/
  float: none;
  /*I've also tried adding a class for img and position: absolute*/
}


/* ^^^ Change float to "none"...seems to work here */

.nameTag {
  width: 100%;
  height: 50px;
  position: relative;
  background-color: gray;
}

.nameText {
  color: white;
}

＆＃13;

<div class="container">
  <div class="nameTag"><a href="" class="nameText">Mobile App</a></div>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUiyrmhTXFppqk4aYzqTOU9nimCQsYibukwAV8rstsDkAVQT-mA" />
</div>

<div class="container">
  <div class="nameTag"><a href="" class="nameText">Mobile App</a></div>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUiyrmhTXFppqk4aYzqTOU9nimCQsYibukwAV8rstsDkAVQT-mA" />

</div>

<div class="container">
  <div class="nameTag"><a href="" class="nameText">Mobile App</a></div>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUiyrmhTXFppqk4aYzqTOU9nimCQsYibukwAV8rstsDkAVQT-mA" />
</div>

＆＃13;

顶部多个图像上有多个div

2 个答案: