Сделайте div ссылку, различия между двумя кодами - PullRequest
Новая
       13

Сделайте div ссылку, различия между двумя кодами

0 голосов
/ 17 октября 2019

Ι хотите сделать div, содержащую изображения и текст, полностью квадратной ссылкой. До сих пор я нашел следующие коды: 

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

с: 

a {
    display: block;
}

, в то время как 2-й точно такой же, как указано выше, но с внешним div: 

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

Есть ли различия? Что мне выбрать? Ty

Ответы [ 3 ]

0 голосов
/ 17 октября 2019

Вы можете использовать этот код 

<!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>
0 голосов
/ 17 октября 2019

Полностью зависит от использования. То, что вы можете контролировать с помощью родительского 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>
0 голосов
/ 17 октября 2019

Полагаю, я понимаю, что вы хотите, но я не уверен, что пойду ли я, если вы хотите иметь возможность нажимать на 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;
}
...