使 div 成为链接，两个代码之间的差异答案

【问题标题】：Make div a link, differences between two codes使 div 成为链接，两个代码之间的差异
【发布时间】：2020-02-13 20:19:56
【问题描述】：

我想创建一个包含图像和文本的div 一个完全方形的链接。到目前为止，我发现了以下代码：

<a href="">
    <img src="">
    Some text
</a>

与：

a {
    display: block;
}

而第二个与上面完全相同，但外部有一个div：

<div>
    <a href="">
        <img src="">
        Some text
    </a>
</div>

他们有什么不同吗？我应该选择什么？类型

【问题讨论】：

第一个选项：您正在使用 display:block 将标签（内联标签）转换为块标签。第二个选项：您正在使用 DIV 标签（块标签），因此您不需要使用 display:block
投票结束，因为这将基于意见。做能完成工作的事情。

标签： html css href

【解决方案1】：

我相信我明白你想要什么，但如果你想能够点击 div 并做某事，或者你只是想要一个 <div> 围绕所有内容，我不确定我是否会关注。

如果是后者，试试这个。您需要调整高度/宽度等以满足您的需求，但这应该可以帮助您入门。

HTML

<div>
    <a href="https://google.com">
        <img src="https://via.placeholder.com/150">
        Some text
    </a>
</div>

CSS

div {
    width: 150px;
    height: 180px;
    border: 1px solid black;
    text-align: center;
}

div > a {
    background-color: red;
    display: block;
    width: 150px;
    height: 180px;
}

【讨论】：

【解决方案2】：

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    div {
      width: 200px;
      height: 200px;
      text-align: center;
      background-color: #ddd;
      padding: 25px 0px;
    }
    
    div a {
      background-color: #000;
      display: block;
      width: 150px;
      height: 150px;
      margin: 0 auto;
    }
    
    div a img {
      width: 100%;
    }
  </style>
</head>

<body>
  <div>
    <a href="https://www.google.com/">
      <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" /> Some text
    </a>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

【讨论】：

【解决方案3】：

完全取决于使用情况。您可以使用父 div 控制的东西是对齐。

.d-flex {
  display: flex;
}

<div class="d-flex">
<a href="LINK"><img class="testpage" src="https://dummyimage.com/200x200/000/fff" /></a>
<a href="LINK"><img class="testpage" src="https://dummyimage.com/200x200/000/fff" /></a>
<a href="LINK"><img class="testpage" src="https://dummyimage.com/200x200/000/fff" /></a>
</div>

【讨论】：