将<div>作为链接并保存容器的大小

Question

所以现在我有了这个结构，我对它很满意。

问题是，这个容器应该作为链接活动。到目前为止，只有当您按下文本时，链接才能正常工作。我知道，如果我要使结构类似于<a><div...></div></a>，但容器的位置就会变得不同，我就可以使它们活动。

现在我使用以下代码

CSS：

.containerfourt{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}





.titlewhitebackground{
  width: 70%;
  height: auto;
  padding: 20px;
  background-color: white;
  display: inline-block!important;
  background-color: white;
 background-image: url("/expotory/wp-content/uploads/2016/06/bar_003soft.png");
}



.newnews{
  width: 30%;
  height: auto;
  padding: 20px;
  background-color: white;
  display: inline-block!important;
  background-color: white;
  color: white;

}


.navigationfourtfirst{
  width: 48.5%;
  height: auto;
  padding: 20px;
  background-color: #048fc2;
  display: inline-block!important;
  margin-right: 30px;
  margin-top: 30px;
  color: white;
 background-image: url("/expotory/wp-content/uploads/2016/06/regioni.svg"), url("/expotory/wp-content/uploads/2016/06/logistika.svg"), url("/expotory/wp-content/uploads/2016/06/ploshadki.svg");
  background-repeat: no-repeat;
  background-position: 75% 95%, 85% 95%, 95% 95%;
  background-size: 30px 30px;


}


.navigationfourtsecond{
  width: 23%;
  height: auto;
  padding: 20px;
  background-color: #174a62;
  display: inline-block!important;
  margin-right: 30px;
  margin-top: 30px;
  color: white;
  background-image: url("/expotory/wp-content/uploads/2016/06/regioni.svg"), url("/expotory/wp-content/uploads/2016/06/logistika.svg"), url("/expotory/wp-content/uploads/2016/06/ploshadki.svg");
  background-repeat: no-repeat;
  background-position: 50% 95%, 70% 95%, 90% 95%;
  background-size: 30px 30px;
}

.navigationfourtthird{
  width: 23%;
  height: auto;
  padding: 20px;
  background-color: #174a62;
  display: inline-block!important;
  margin-top: 30px;
  color: white;
  background-image: url("/expotory/wp-content/uploads/2016/06/regioni.svg"), url("/expotory/wp-content/uploads/2016/06/logistika.svg"), url("/expotory/wp-content/uploads/2016/06/ploshadki.svg");
  background-repeat: no-repeat;
  background-position: 50% 95%, 70% 95%, 90% 95%;
  background-size: 30px 30px;
}

.navigationfourtfourth{
  float: left;
  width: 100%;
  max-width: 1130px;
  margin-left: auto;
  margin-right: auto;
  min-height: 283px;
  margin-bottom: 15px;
  margin-top: 30px;
  height: auto;
  height: auto;
  padding: 20px;
  background-image: url(/expotory/wp-content/uploads/2016/06/expotory_b_00.png);
  color: white;
}


.navigationfourtfirst:hover,
.navigationfourtsecond:hover,
.navigationfourtthird:hover{
    background-color: #0167a5;
}

.navigationfourtfourth:hover{
    background-image: url(/expotory/wp-content/uploads/2016/06/expotory_b_00001.png);
}


.navigationfourtfirst h3,
.navigationfourtsecond h3,
.navigationfourtthird h3,
.navigationfourtfourth h3
{
  color: white;
}

.navigationfourtfirst a,
.navigationfourtsecond a,
.navigationfourtthird a,
.navigationfourtfourth a
{
  color: white;
}

.navigationfourtfirst a:hover,
.navigationfourtsecond a:hover,
.navigationfourtthird a:hover,
.navigationfourtfourth a:hover
{
  color: white!important;
}

和HTML

<div class="containerfourt">
<div class="titlewhitebackground">
<h1>Территория</h1>
<h3>Путеводитель по выставочному миру: города и площадки, обзоры, аналитика, интересные факты и навигация, — где проводить выставки, где выставлять свой продукт, где посещать?
</h3>
</div>

<div class="newnews"><section id="recent-posts-3" class="widget widget_recent_entries">
<h3 class="widget-title"><u>свежие записи</u></h3>
<ul>
    <li><a href="http://cu33132.tmweb.ru/expotory/2016/06/07/hashtag-united/"><u>Хэштег объединяет</u></a></li>
    <li><a href="http://cu33132.tmweb.ru/expotory/2016/06/02/advices/"><u>25,5 универсальных советов практикующим маркетологам</u></a></li>
    <li><a href="http://cu33132.tmweb.ru/expotory/2016/06/02/agrovideo/"><u>АГРОСАЛОН запустил вирусный сериал</u></a></li>
</ul>
</section></div>

<div class="navigationfourtfirst">
<a href="http://cu33132.tmweb.ru/expotory/category/regions/">
<h3>РЕГИОНЫ</h3>
Аналитика по регионам России: слабые и сильные стороны территорий, профильные отрасли, активность участников выставочного бизнеса.
</a>
</div>


<div class="navigationfourtsecond">
<a href="http://cu33132.tmweb.ru/expotory/category/platforms/">
<h3>ПЛОЩАДКИ</h3>
Всё о выставочных площадках и пространствах: история легендарных выставочных залов, технические характеристики, маркетинговые возможности.
<br>
</a>
</div>


<div class="navigationfourtthird">
<a href="http://cu33132.tmweb.ru/expotory/category/logistics/">
<h3>ЛОГИСТИКА</h3>
Справочник для экспонентов и посетителей: как добраться на выставку, как доставить оборудование и продукцию, где разместиться.
</a>
</div>



<div class="navigationfourtfourth">
<a href="http://cu33132.tmweb.ru/expotory/category/territory-in-numbers/">
<h3>ТЕРРИТОРИЯ В ЦИФРАХ</h3>
Инфографика — аналитика по регионам, выставочным площадкам России и мира и логистике выставок в удобном графическом формате.
</a>
</div>

</div>

该网站的链接是http://cu33132.tmweb.ru/expotory/territory/。

希望你能帮我！提前谢谢你！

Answer 1

在这里快速搜索得到了一个帖子，其中显示了三种不同的方法：How do you make a div tag into a link

提供的链接中的以下一行有助于：

<div onclick="location.href='url'">content</div>

Answer 2

下面的代码块将找到它包含的链接并带您到那里。

​

// Clickable DIV code starts here  

$("div").click(function () {
    window.location = $(this).find("a").attr("href");
    return false;
});

div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px solid blue;
  cursor: pointer;
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div> <a href="http://stackoverflow.com/"> Clicker </a>

</div>

​

Answer 3

您可以使用少量JS使div可点击：

<div onClick="location.href=http://google.com">

</div>