html - <a>标记与<div>不匹配

我正在做一个螺旋形的图片库，所以当你点击任何图片，它会带你到另一个页面。为此，我使用了以下代码：
HTML格式：

<div class="rotulacion-embarcaciones">
        <a href="rotulacion-embarcaciones.html">
            <img src="embarcaciones/embarcaciones1.jpg" class="rotulacion-embarcaciones">
        </a>
    </div>

CSS:

.rotulacion-embarcaciones {
border-radius: 50%;
width: 200px;
height: 200px;
position: absolute;
padding: 40px;
top: 100px;
left:35px;

}
但问题是我无法点击图像，因为<a>标签有一些问题，请查看chrome检查器检测到的图像，以便更好地了解发生了什么：
http://i.stack.imgur.com/1FdbL.png
http://i.stack.imgur.com/8rtYY.png
http://i.stack.imgur.com/JHBcj.png

最佳答案

您使用a时遇到的问题是，其中的所有内容都是绝对定位的。position:absolute的内容不会占用正常页面流中的空间，这意味着a会缩小到0×0的大小。
解决方案：对a中的图像使用另一个类，并在不使用position的情况下设置其样式。

关于html - <a>标记与<div>不匹配，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32808945/