我有这个标记
<main>
<section class="download">
<img src="media/icon.svg" alt="TOX chat icon" width="345" height="280">
<div class="download_desc">
<h1>A New Kind of Instant Messaging</h1>
<p>
Whether it's corporations or governments, digital surveillance today is widespread. Tox is easy-to-use software that connects
you with friends and family without anyone else listening in. While other big-name services require you to pay
for features, Tox is completely free and comes without advertising — forever.
</p>
</div>
</section>
并应用 CSS:
main {
display: grid;
grid-template-rows: 750px 500px 815px 815px 180px;
grid-template-columns: repeat(6, 1fr);
}
.download {
background-color: #414141;
color: white;
}
.download_desc {
grid-column: 2/6;
}
由于某种原因,网格列在这种情况下根本不起作用。div
with download_desc
班级仍然在第一列,而不是我想要的从第二到第六。
如果我直接将其应用到.download
班级,但不是孩子。
Why?
您的问题是您的网格是“main”元素,而“download_desc”位于“download”部分标记内。
尝试移动:
display: grid;
grid-template-rows: 750px 500px 815px 815px 180px;
grid-template-columns: repeat(6, 1fr);
到“下载”类。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)