移动项目到网格的底部

2022-01-27 22:37:07 标签 htmlcsscss-grid

我是相对新的HTML和目前正在做一个组合网站。

https://jsfiddle。net/2b4sead0/

.grid-container {
  background-color: rgb(222, 224, 202);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: inline-block;
}
.grid-item1 {
  padding: 1em;
  height: 33%;
  border: 1px solid black;
}
.grid-item2 {
  padding: 1em;
  height: 33%;
  border: 1px solid black;
}
.grid-item3 {
  padding: 1em;
  height: 33%;
  border: 1px solid black;
  text-align: center;
}

这是我目前掌握的信息。我想知道我如何才能使它,这样我就可以确保文本在一个网格的底部。

示例:我的网格是1列3行。当前文本位于每一行的顶部。但我想知道我如何能重新定位的文本,使他们彼此更接近(在这种情况下移动的“hi”的广场底部,所以它是正确的上方“我是andrew camilleri”)。同时,仍然使网格跨度为100%,这样当你在任何大小的屏幕上查看时,它会重新格式化。

提前谢谢。

###不需要在你的网格特定的CSS中做任何改变。

我建议您删除h2元素上的空白,并将。grid-item1类设置为

.grid-item1 {
  ...
  display: flex;
  align-items: flex-end;
}
.grid-item1__h2 { // Specific class for your h2 in case you want margins on other h2's
  margin: 0;
}

像这样https://jsfiddle。net/kLchzod3/1/

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码