When wrapping a DIV in an anchor tag the layout gets messed up?

问题: So I have been given the task of mocking up a new bootstrap version of the building floor map on the web and while trying to make a DIV area clickable and linking to anothe...

问题:

So I have been given the task of mocking up a new bootstrap version of the building floor map on the web and while trying to make a DIV area clickable and linking to another page, the anchor tag used to make the link makes the div layout messed up?

Here is my code and an image

before I add the anchor tag around the div

enter image description here

after I add the anchor tag around the div

enter image description here

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

回答1:

Try reading this: Is putting a div inside an anchor ever correct?.

If your goal is to open a link when the div is clicked you can try putting an onClick=(window.location.href='link here') event on the div tag or use jQuery event in script $('div').click(function(){window.location.href='link here'});


回答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>

You can do similar like this to avoid this css conflict with anchor tag and also to make a div clickable and redirect to destination link. If you run this code you will find 404 error code as there is no file here. Thank you. If this helps you then please make it accepted.


回答3:

Your mark up needs to be updated as you have some closing div tags missing, not sure if this just the case in the code in your question. The markup should be:

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

You need to give the <a> a style property of display: block; like this:

.item a {
   display: block;
}

The anchor will now cover the whole div and work the way you expect it to. It's also a good idea to note; if using a framework like Bootstrap the order of divs is important to make sure the grid behaves as expected, it should always be:

container > row > col


回答4:

Managed to solve this issue by removing the div with the column classes and then adding the classes from the removed div to the anchor tag

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


<p> floor zero </p>

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


</a>
  • 发表于 2019-01-11 03:32
  • 阅读 ( 238 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除