Question

HTML中的

：如何在<div>

中创建不同的图像及其各自的超链接

我想避免为每张图片制作多个<div>条目。

<div class="image_" data-no-elementresizer><a href="http://....." target="_self">img.jpg</a></div>

<div class="image_" data-no-elementresizer><a href="http://....." target="_self">img.jpg</a></div>

<div class="image_" data-no-elementresizer><a href="http://....." target="_self">img.jpg</a></div>

Answer 1

这会是你要找的东西吗？

.gallery {
  width: 820px;
  background-color: blue;
  height: 800px;
}
.gallery img {
  float: left;
  vertical-align: top;
  width: 200px;
  height: 200px;
}

<div class="gallery">
  <img src="http://lorempixel.com/200/200" />
  <img src="http://lorempixel.com/200/200/people/2" />
  <img src="http://lorempixel.com/200/200/city/3" />
  <img src="http://lorempixel.com/200/200/city/2" />
  <img src="http://lorempixel.com/200/200" />
  <img src="http://lorempixel.com/200/200" />
  <img src="http://lorempixel.com/200/200/people" />
  <img src="http://lorempixel.com/200/200/sports/2" />
  <img src="http://lorempixel.com/200/200/city" />
  <img src="http://lorempixel.com/200/200/sports" />
</div>

Answer 2

这可能会迟到，但我的答案是图片和超链接。

div.image {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}   

div.image :hover {
    border: 1px solid #777;
}

div.image img{
    width: 100%;
    height: auto;
}


<div class="image">
  <a target="_self" href="Url">
    <img src="ImageUrl" width="300" height="200">
  </a>
   <a target="_self" href="Url">
    <img src="ImageUrl" width="300" height="200">
  </a> <a target="_self" href="Url">
    <img src="ImageUrl" width="300" height="200">
  </a>
</div>

在DIV上的超链接

2 个答案: