<a href=link><div></a> link not woking

Question

I have a row with some divs, and when the user clicks on those divs, I want them to be forwarded to another website. To do that I placed the <a> tag outside the div like this:

 <div class="row spacing2"> <h3 id="Parceiros">Parceiros</h3> <a href="http://www.criticalsoftware.com/pt/homepage"> <div class="col-md-2 spacing4"> <img alt="" class="img img-responsive img-thumbnail" src="parceiros/CriticalSoftware.png"> </div> </a> <a href="http://www.globalmediagroup.pt/"> <div class="col-md-2 spacing4"> <img alt="" class="img img-responsive img-thumbnail" src="parceiros/GlobalMedia.png"> </div> </a> <a href="https://www.facebook.com/pfrinvest/"> <div class="col-md-2 spacing4"> <img alt="" class="img img-responsive img-thumbnail" src="parceiros/pfr.jpg" style="height:100px;width:200px"> </div> </a> <a href="http://www.planeta-virtual.pt/"> <div class="col-md-2 spacing4"> <img alt="" class="img img-responsive img-thumbnail" src="parceiros/PlanetaVirtual.png"> </div> </a> <a href="https://www.sonae.pt/pt/"> <div class="col-md-2 spacing4"> <img alt="" class="img img-responsive img-thumbnail" src="parceiros/Sonae.png"> </div> </a> <a href="http://www.agros.pt/"> <div class="col-md-2 spacing4"> <img alt="" class="img img-responsive img-thumbnail" src="parceiros/Agros.png"> </div> </a> </div>

I don't know why, but when I inspect the element it says that my a tag is 0px x 0px. If someone can give me a tip I would appreciate it.

Answer 1

You need to add col class outside of a tag.

<a href="http://www.criticalsoftware.com/pt/homepage"><div class="col-md-2 spacing4"><img alt="" class="img img-responsive img-thumbnail" src="parceiros/CriticalSoftware.png"></div></a>

<div class="col-md-2 spacing4"><a href="http://www.criticalsoftware.com/pt/homepage"><img alt="" class="img img-responsive img-thumbnail" src="parceiros/CriticalSoftware.png"></a></div>

As col class has float: left property the a tag has 0 width and height.

Answer 2

只需将以下 css 规则添加到您的<a>标签中：

display:block;