Bread09
@Bread09
Newonkiy

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

Теряется верстка при добавлении ссылки внутрь ссылки.
Хочу чтобы блок полностью был ссылкой и + внутри него еще одна ссылка как на изображении
623b6010297e1743992898.png
НО ПОЛУЧАЕТЬСЯ ТАК
623b611142cd1658987492.png
вниз слетает
Но если убрать ссылку внутри блока все норм становиться

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;
}
  • Вопрос задан
  • 120 просмотров
Решения вопроса 2
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
спецификация у ссылки такая. https://html.spec.whatwg.org/multipage/text-level-...
она не может внутри себя содержать другие ссылки
nIQ5xWGI.jpg?download=1&name=%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%2023-03-2022%2021:34:26.jpg
Ответ написан
Bread09
@Bread09 Автор вопроса
Newonkiy
Всё, сеньоры, нашел ответ. Спасибо, Александре Пирс!
Решение:
Оборачиваем внутренюю ссылку в тег <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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы