Почему теряется верстка при добавлении тега «а» внуть тега «а»?

Question

[BEKa T]

Теряется верстка при добавлении ссылки внутрь ссылки.
Хочу чтобы блок полностью был ссылкой и + внутри него еще одна ссылка как на изображении

НО ПОЛУЧАЕТЬСЯ ТАК

вниз слетает
Но если убрать ссылку внутри блока все норм становиться

v class="wrapper-box">
		<h1>Suggested</h1>
		<div class='wrapper'>
			<div class="video-box">
				<a href="/play" class="video-link">
					<div class="video">
						<img src="../media/poster.jpg" class="poster"></img>
						<br>
						<br>
						<span class="title info">Gumball fail1</span><br>
						<span class="posted info">posted by <a class="blue-link">Anais00039254</a><br></span>
						<span class="views info">201432 views</span>
					</div>
				</a>
			</div>
		</div>
	</div>

.wrapper-box{
  padding: 0 2%;
}
.wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 0 30px;
  justify-content: center;
  align-content: center;
/*   t r b l */
}
.video-box {
  border-radius: 6px;
}
.video-box:hover{
  background: #fdcf0b;
}
.video-box:hover .info {
  color: #fff;
}

/*проблема тут*/
.video-box .video-link {
  display: block;
  height: 100%;
}

.video {
  margin: 10px;
  height: 100%;
}
.poster {
  width: 100%;
  border-radius: 6px;
}
.title {
  font-size: 20px;
  font-weight: bold;
}
.posted {
  font-size: 15px;
  font-weight: bold;
}
.views {
  font-size: 14px;
  color: gray;
}

Comments

[Ankhena]

У вас два глобальных варианта:
1. Оборачивать в ссылки по частям.
2. Вынуть блок с текстом и второй ссылкой из первой и спозиционировать гридами или абсолютами (лучше гридами)

[BEKa T]

Ankhena, наверное выберу 1 вариант, но можете ли небольшой пример кода написать, пожалуйста?

[Ankhena]

Bred Thomson, по-моему, он не очень удобный...

Но так и пишете ссылка вокруг картинки, ссылка вокруг текста, ссылка вокруг чего-то там еще...

[BEKa T]

Ankhena, я 2 вариант просто не понял

[Павел]

полнейшая чушь, не делайте так никогда.

[BEKa T]

ясно, а как тогда делать?

[Павел]

Bred Thomson, картинку обернуть в ссылку

[BEKa T]

Павел, она и так обернута. В таком случае сылкой становить лишь картинка, а не весь блок

Answer 1

[iBird Rose]

спецификация у ссылки такая. https://html.spec.whatwg.org/multipage/text-level-...
она не может внутри себя содержать другие ссылки

Comments

[BEKa T]

хорошо, а как вообще тогда реализовать это?
чтобы как в ютубе было. Целый блок ссылка и внутри текст-ссылка

[iBird Rose]

Bred Thomson, где ты на ютубе такое увидел? там нет полностью обернутого блока в ссылку. там каждый отдельный элемент оборачивается в свою ссылку. можешь так и сделать

Answer 2

[BEKa T]

Всё, сеньоры, нашел ответ. Спасибо, Александре Пирс!
Решение:
Оборачиваем внутренюю ссылку в тег <object></object>

<div class="video-box">
				<a href="/play/video" class="video-link">
					<div class="video">
						<img src="../media/poster.jpg" class="poster"></img>
						<br>
						<br>
						<span class="title info">Gumball fail1</span><br>
						<span class="posted info">
							<object>
								posted by <a class="blue-link">Anais00039254</a>
							</object><br>
						</span>
						<span class="views info">201432 views</span>
					</div>
				</a>
			</div>

Comments

[Alfieros]

Ужас! Я бы вам за такую верстку....

[BEKa T]

Alfieros, работает!? Не трогаю!

[ambisinister One]

Bred Thomson, Александра - женское имя)
Ей, а не ему)

[BEKa T]

ambisinister One, действитьельно О_О не заметил))

[ambisinister One]

Bred Thomson, Александре Пирс. Пирс не склоняется)
Тогда уж совсем правильно исправляйте)

[BEKa T]

ambisinister One, исправил