从底部开始放置网格项 [英] Position grid items starting at the bottom
问题描述
我有一个CSS网格,在此网格文章中可能是博客文章。它们由左侧的图像和右侧的文本组成。
I have a CSS grid and in this grid articles that could be blog posts. They consist of an image on the left and text on the right.
我需要文章从底部开始,以便较新的文章出现在它们的上方。但是,无论我尝试了什么,我都无法让他们从头开始。 align-items:end;
应该可以解决这个问题,但事实并非如此……所以我在这里想念什么?
I need the articles to start at the bottom, so that newer articles appear above them. But I just can't get them to start at the bottom whatever I try it's not working. align-items: end;
should do the trick but it doesn't … So what am I missing here?
.blog-Grid {
display: grid;
}
.post {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 50%;
margin: 0 0 10% 15%;
}
<section class="blog-Grid">
<article class="post">
<img id="img" src="images/img1.jpeg" alt="">
<div class="post-text-box">
<h3 class="post-header"> I'm a header </h3>
<p class="post-text"> Lorem ipsum text. </p>
</div>
</article>
<article class="post">
<img id="img" src="images/img2.jpg" alt="">
<div class="post-text-box">
<h3 class="post-header"> I'm a header </h3>
<p class="post-text"> Lorem ipsum text.</p>
</div>
</article>
</section>
推荐答案
那么我在这里想念什么?
您忽略了以下事实:默认情况下,HTML元素的高度为 height:自动
(请参见下面的参考资料)。这意味着它们就是内容的高度。这意味着没有多余的空间用于垂直对齐。
You're overlooking the fact that HTML elements are, by default, height: auto
(see reference below). This means they are the height of their content. This means there is no extra space for vertical alignment.
这里是代码的简化版本。我在容器周围添加了边框。注意高度是如何自动缩小以适合的。
Here is a simplified version of your code. I added a border around the container. Note how the height is automatically "shrink-to-fit".
.blog-Grid {
display: grid;
border: 2px solid red;
}
.post {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
* {
margin: 0;
box-sizing: border-box;
}
<section class="blog-Grid">
<article class="post">
<img id="img" src="images/img1.jpeg" alt="">
<div class="post-text-box">
<h3 class="post-header"> I'm a header </h3>
<p class="post-text"> Lorem ipsum text. </p>
</div>
</article>
<article class="post">
<img id="img" src="images/img2.jpg" alt="">
<div class="post-text-box">
<h3 class="post-header"> I'm a header </h3>
<p class="post-text"> Lorem ipsum text.</p>
</div>
</article>
</section>
只需在容器中增加高度即可创建额外的空间。
So, very simply, add height to your container in order to create extra space.
.blog-Grid {
display: grid;
height: 100vh;
align-content: end;
border: 2px solid red;
}
.post {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
* {
margin: 0;
box-sizing: border-box;
}
<section class="blog-Grid">
<article class="post">
<img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
<div class="post-text-box">
<h3 class="post-header"> I'm a header </h3>
<p class="post-text"> Lorem ipsum text. </p>
</div>
</article>
<article class="post">
<img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
<div class="post-text-box">
<h3 class="post-header"> I'm a header </h3>
<p class="post-text"> Lorem ipsum text.</p>
</div>
</article>
</section>
另请参见:
- 默认情况下,block元素消耗其父级的全部宽度。这种行为不会扩展到高度。
- align-有什么区别?项目与网格布局中的对齐内容?
- justify-自我,对齐项和对齐内容(有关
align-items
与align-content $ c的更多详细信息$ c>)
- Block elements consume the full width of their parent, by default. This behavior does not extend to height.
- What is the difference between align-items vs. align-content in Grid Layout?
- The difference between justify-self, justify-items and justify-content in CSS Grid (more details about
align-items
vsalign-content
)
这篇关于从底部开始放置网格项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!