将DIV包装在锚定标签中时，布局是否混乱？

Question

因此，我承担了在网络上模拟建筑物楼层地图的新引导版本的任务，并且在尝试使DIV区域可单击并链接到另一个页面时，用于制作链接的锚标记使div布局搞砸了？

这是我的代码和图片

在将div标签添加到div之前

在div周围添加锚标记后

    <div class="container">
  <div class="row">
<a href="floor0.html">
    <div class="item col-lg-4">

<p> floor zero </p>

<br>
<br>
<br>
<br>

    </div>
</a>

Answer 1

尝试阅读以下内容：Is putting a div inside an anchor ever correct?。

如果您的目标是在单击div时打开链接，则可以尝试在div标签上放置onClick=(window.location.href='link here')事件，或在脚本$('div').click(function(){window.location.href='link here'});中使用jQuery事件

Answer 2

$(".item").click(function() {
 window.location = $(this).data("location");
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="item col-lg-4" data-location="floor0.html">
  <p> floor zero </p>
</div>

您可以执行类似的操作，以避免与锚标记之间的CSS冲突，并使div可单击并重定向到目标链接。如果运行此代码，则将找到404错误代码，因为此处没有文件。谢谢。如果这对您有帮助，请使其接受。

Answer 3

您的标记需要更新，因为缺少一些关闭的div标签，不确定在您的问题代码中是否只是这种情况。标记应为：

<div class="container">
    <div class="row">
        <div class="item col-lg-4">
            <a href="floor0.html">
                <p> floor zero </p>
            </a>
        </div>
    </div>
</div>

您需要为<a>提供display: block;的样式属性，如下所示：

.item a {
   display: block;
}

锚现在将覆盖整个div，并按您期望的方式工作。注意也是个好主意。如果使用Bootstrap之类的框架，则div的顺序对于确保网格按预期运行非常重要，则应始终为：

容器>行>列

Answer 4

设法通过删除带有列类的div，然后将已删除的div中的类添加到锚标记来解决此问题

<div class="container">
<div class="row">
<a class="item col-lg-4" href="#">


<p> floor zero </p>

 <br>
 <br>
 <br>
 <br>


</a>