做出回应<a><div></div></a>？

Question

我在一行中有3个<div>。前两个是用一个<a>-链路包裹起来的。这些都没有反应了。我尝试用纯html和css来实现这一点。我如何才能让他们像上一个一样做出反应？这是我的代码：

(这是我的问题的codepen.io链接：https://codepen.io/NiklasG/pen/oNoPVNL)

HTML:

<main>
<div id= container>
<a><div class="tile"></div></a>
<a><div class="tile"></div></a>
<div class="tile"></div>
</div>
</main>

CSS：

main{
padding: 30px;
}
#container{
display: flex;
align-items: center;
justify-content: center;
}
.tile{
width: 400px;
height: 100px;
border-style: dashed;
}

感谢您的帮助：(

Answer 1

根据您的问题，您希望a填充整个div。正如罗恩提到的。<a><div></div></a>无效HTMLa应在div内

1-(首先将a放入div

<main>
<div id= container>
<div class="tile"><a></a></div>
<div class="tile"><a></a></div>
<div class="tile"></div>
</div>
</main>

2-(使用百分比而不是使用px

.tile{
width: 33%;
height: 100px;
border-style: dashed;
}

3-(，然后添加该CSS以使a填充内容。

a{
display: inline-block;
width: 100%;
height: 100%;
}

4-(使用媒体查询使其响应

@media screen and (max-width: 600px) {
.tile{
width: 100%;
background: red;
}
#container{
display: block;
}
}

这是你可以查看的代码笔链接https://codepen.io/kaanatesel/pen/JjOazWK

Answer 2

或者，您可以使用网格布局在#container上创建3列响应。

我把你们的title改成了title__container

可能的示例：

a {
color: black;
text-decoration: none;
}
main {
padding: 30px;
}

/* You can better use grid */
#container {
margin: 0 auto;
display: grid;
/*optional*/
/*gap: 1rem;*/
grid-template-columns: repeat(3, 1fr);
height: 100px;
}
#container .title__container {
width: 100%;
max-width: 400px;
height: 100%;
border-style: dashed;
/* you can use flex here if you want */
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}

<main>
<div id=container>
<a class='title__container' href='#'>
<h2>Title 1</h2>
</a>
<a class='title__container' href='#'>
<h2>Title 2</h2>
</a>
<div class="title__container">
<h2>Title 3</h2>
</div>
</div>
</main>