gpt4 book ai didi

css - 为标题和图像使用网格,但现在一个图像位于/隐藏另一个图像之上

转载 作者:行者123 更新时间:2023-11-27 22:52:33 24 4
gpt4 key购买 nike

第二个 img 现在不是并排出现,而是将另一个隐藏在它后面,不确定是什么原因造成的。有一段时间没有使用网格区域,但使用了一些我用于其他东西的相同结构,已经成功了,所以不明白为什么这不起作用。感谢您的帮助。

#intro article{
background: #FFE121;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"a a"
"b c";
grid-column-gap: 50px;

}

#intro article h2{
grid-area: a;
}

#intro article:first-of-type img{
grid-area: b;
}

#intro article:last-of-type img{
grid-area: c;
}

#intro h2{
text-align: center;
color:#037272;
}


#intro p{
flex:100%;
font-size: 25px;
padding:20px 40px;
}
	<section id="intro">
<article>

<img src="images/c1.JPG" alt="c 1">

<h2>This year we welcome ...</h2>

<img src="images/c2.JPG" alt="c 2">

</article>


<p>By popular demand...</p>

</section>

最佳答案

您的 CSS 选择器 #intro article:first-of-type img 不正确,应该是 #intro article img:first-of-type

#intro article:last-of-type img 也是如此。

#intro article{
background: #FFE121;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"a a"
"b c";
grid-column-gap: 50px;

}

#intro article h2{
grid-area: a;
}

#intro article img:first-of-type{
grid-area: b;
}

#intro article img:last-of-type{
grid-area: c;
}

#intro h2{
text-align: center;
color:#037272;
}


#intro p{
flex:100%;
font-size: 25px;
padding:20px 40px;
}
<section id="intro">
<article>

<img src="" alt="c 1">

<h2>This year we welcome ...</h2>

<img src="" alt="c 2">

</article>


<p>By popular demand...</p>

</section>

关于css - 为标题和图像使用网格,但现在一个图像位于/隐藏另一个图像之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59389856/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com