Почему div вылетает за пределы a?

Question

[IIIu6ko]

Всем привет. Есть вот такая часть разметки:

<a class="tasks__item task task--overdue" href="#">
  <header class="task__header">
    <div class="task__name">
      <span class="task__address">Спортивная, 10, 1 подъезд, 17 этаж, 23 квартира</span>
      <span class="task__num">№540042</span>
    </div>
    <div class="task__dates">
      <span class="task__start-date">Поставлена 12 марта</span>
      <span class="task__end-date">До 22 марта</span>
    </div>
  </header>
  <p class="task__description">Контрольное списание показаний ИПУ, осмотр общего имущества в квартирах</p>
  <div class="task__characters">
    <div class="task__character">
      <img class="task__character-photo" src="imgs/task/task__character-photo.png" alt="character-photo" width="132" height="132">
      <div class="task__character-info">
        <div class="task__character-role">Житель:</div>
        <div class="task__character-name">Андрей Михайловский</div>
        <a class="task__character-phone" href="tel:[phone]">[phone]</a>
      </div>
    </div>
    <div class="task__character">
      <img class="task__character-photo" src="imgs/task/task__character-photo.png" alt="character-photo" width="132" height="132">
      <div class="task__character-info">
        <div class="task__character-role">Исполнитель:</div>
        <div class="task__character-name">Алексей Кунгуров</div>
        <a class="task__character-phone" href="tel:[phone]">[phone]</a>
      </div>
    </div>
  </div>
</a>

Если открыть её в браузере(открывал в последних версиях chrome и firefox), то происходит вот такая картина

Блок task__characters вылетает из tasks__item.

https://codepen.io/anon/pen/VXZZgE

Answer 1

[Алексей Ярков]

a > div
О боже, зачем так?
https://stackoverflow.com/questions/3092610/div-in...
UPD: вам же пытаются объяснить, что оборачивать такие блоки тегом а - плохо.
Браузер видит первый закрывающий тег </a> и обрабатывает разметку по нормальному, а не как у вас.

Comments

[IIIu6ko]

Банальная карточка-ссылка.

[Алексей Ярков]

IIIu6ko, в этом случае ГОРАЗДО лучше будет обработка клика средствами JS, а не оборачивание div в a

[Максим Тимофеев]

там еще и вторая ссылка внутри первой, там вообще ад. Эта гадость работать не будет.

[Алексей Ярков]

Максим Тимофеев, так о тож

[IIIu6ko]

Максим Тимофеев, Она и так не работает т.к. браузер выкидывает div. Даже если бы там не было ссылки внутри.

UPD
Поспешил, не работает из-за ссылки внутри.

[IIIu6ko]

Алексей Ярков, Чем плохо оборачивать div в a? Если a дать display: block, то это тот же блочный элемент будет.
Но браузер почему-то выкидывает div, даже если ссылке дать display: block.

[Алексей Ярков]

IIIu6ko, а уберите внутренние ссылки

[IIIu6ko]

Алексей Ярков, Если средствами js сделать, то ссылка внутри будет прожиматься?

[Алексей Ярков]

IIIu6ko, для начала будет неплохо узнать что именно должно было происходить по клику на карточку.
Вам надо обработать клик как по всему диву, так и по ссылкам в нем?

[IIIu6ko]

Алексей Ярков, При клике будет открывать отдельная страница с полной информацией.
Да, чтобы при клике на всю карточку кроме номера телефона он переходил на страницу с полной информацией.

[Алексей Ярков]

IIIu6ko, да легко )))
Вешаете обработчик на клик по '.tasks__item' например.
При клике смотрите на event.target, и если это не ссылка, то переход на страницу с инфой.

Ну это если совсем вкратце

[IIIu6ko]

Алексей Ярков, Ссылку на другую страницу указывать также через href?

<div class="tasks__item task task--overdue" href="#">

[Алексей Ярков]

IIIu6ko, ну в случае с обработчиком JS до лампочки как указывать, но принято в data-* атрибуты складывать такую инфу

[IIIu6ko]

Алексей Ярков, Написал вот такую функцию

function goFullTask() {
  if (event.target.classList[0] !== "task__character-phone") {
    location.href = event.currentTarget.getAttribute("data-href");
  }
}

<div class="tasks__item task task--overdue" data-href="https://toster.ru" onclick="goFullTask();">

Что-нибудь можно в ней улучшить?

[Алексей Ярков]

IIIu6ko, вместо getAttribute("data-href") юзать datalist() например

[IIIu6ko]

Алексей Ярков, dataset?

[IIIu6ko]

Алексей Ярков, Я думаю ещё нужно переделать, чтобы он не по классу смотрел, а по тегу.
Если это не ссылка, то...

function goFullTask() {
  if (event.target.tagName !== "a") {
    location.href = event.currentTarget.dataset.href;
  }
}

[Алексей Ярков]

IIIu6ko,

dataset

Да, конечно он )) Затупил ))

[IIIu6ko]

Алексей Ярков, А я сидел минут 5 тупил в гугл :D Мне выдавал html-тег <datalist>.
Потом всё-таки додумался загуглить работу с дата-атрибутами в js.

Answer 2

[ink]

<div onclick="window.open('http://google.com, '_blank');"></div>

так наверно правильнее