我如何使用display:grid它只是目标.entry或.post元素,并排除档案标题和分页？
(archive-description并且pagination跨越内容div的整个宽度)
.content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}<main class="content">
<div class="archive-description">Archive Title</div>
<article class="post entry">This is a post</article>
<article class="post entry">This is a post</article>
<article class="post entry">This is a post</article>
<li class="pagination">Previous & Next Entry</li>
</main>正如你可以在看到小提琴,被内嵌在图像中显示的姓名和头衔,看起来像这样的截图目前.
但我更喜欢它们显示为垂直居中而没有列表样式,并且在图像旁边彼此叠加,因此它们都与图像对齐:
.people {
display: inline-block;
width: 33%;
margin-bottom: 40px;
}
.people img,
.title {
display: inline-block;
vertical-align: middle;
padding-left: 30px;
}<div class="people">
<a href="#">
<img src="//0.gravatar.com/avatar/f9879d71855b5ff21e4963273a886bfc?s=120">
</a>
<p class="title">Title</p>
<a class="name" href="#">Name</a>
</div>