整个div可点击的链接

时间:2020-07-24 05:56:16

标签: php html css

我正在尝试为我的整个div提供一个可点击的链接,但是我不确定这样做的正确方法。任何人都可以帮助我,将不胜感激。我是编码新手,因此仍在学习正确的编码。谢谢。

.container {
  display: flex;
  margin: auto;
  width: 1052px;
}

.container>div {
  background-color: #ffffff;
  border: 1px solid #aaaaaa;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  flex: 1;
  /*grow*/
  height: 210px;
  margin: 45px 10px 0px 10px;
  width: 231px;
}

.container img {
  height: 140px;
  width: 241px;
}

.container>div a {
  color: #353748;
  display: block;
  font-family: Netflix Sans, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: initial;
}

.container>div a:hover {
  color: #353748;
  display: block;
  font-family: Netflix Sans, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 5px 10px 5px 10px;
  text-decoration: underline;
  text-overflow: ellipsis;
  text-transform: initial;
}
<div class="container">
  <div>
    <img src="https://capebretonstartpage.com/1/wire-31023566-1595346165-638_636x382.jpg">
    <a href="https://www.capebretonstartpage.com/pages/about/" target="_blank">About vAdd An Image Add An Image</a>
  </div>
  <div>
    <img src="https://capebretonstartpage.com/1/wire-31023566-1595346165-638_636x382.jpg">
    <a href="https://www.capebretonstartpage.com/pages/about/" target="_blank">About vAdd An Image Add An Image</a>
  </div>
  <div>
    <img src="https://capebretonstartpage.com/1/wire-31023566-1595346165-638_636x382.jpg">
    <a href="https://www.capebretonstartpage.com/pages/about/" target="_blank">About vAdd An Image Add An Image</a>
  </div>

</div>

1 个答案:

答案 0 :(得分:-1)

您可以将div放在<a>标记内