超链接到 DIV [关闭]答案

【问题标题】：hyperlinks into on DIV [closed]超链接到 DIV [关闭]
【发布时间】：2016-04-14 22:11:03
【问题描述】：

在 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>

【问题讨论】：

在这里很难弄清楚你想要实现什么。

标签： html css

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

谢谢！这正是我想要的。效果很好！
与图像的位置有关，无论是将它们放在垂直行还是两行，我会在 HTML 或 CSS 中编辑这方面吗？再次感谢您！
它对您有帮助，这很好，因此您可以将其标记为 answer。但我无法理解你的下一个问题。你想让图像垂直对齐吗？