html - CSS 网格项定位,其中项 1 位于网格列的下端,项 2 位于其列的中心
问题描述
我正在尝试使用 css 网格来实现这一点:
主要部分中有两列的网格。左列中的项目是图像,必须贴在网格底部,而卡片将位于第二列。卡片将居中对齐。
这是我的 HTML/CSS 代码:
.mainbody {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(1, 2fr);
text-align: center;
grid-gap: 5px;
padding-top: 75px;
}
.left {
float: left;
overflow: hidden;
height: 600px;
position: relative;
}
.left-bottom {
position: absolute;
bottom: 0px;
}
.right {
float: left;
width: 50%;
overflow: hidden;
}
<div class="container mainbody">
<div class="left">
<div class="left-bottom">
<img class="image-car" src="...">
</div>
</div>
<div class="container">
<div class="card">
//card text
</div>
</div>
</div>
这段代码完成了这项工作,但它不适用于媒体查询。我是初学者,让我知道我需要做哪些改变,或者我应该遵循什么方法来实现我的目标。
解决方案
您可以缩短 CSS 代码并margin
在网格单元内使用以将内容推向任何边缘或中心。
恕我直言,在使用网格或 flex 构建布局时,浮动或绝对不应该有任何用处。
例子:
.mainbody {
display: grid;
grid-template-columns: 1fr 1fr;
text-align: center;
grid-gap: 5px;
}
.left {
margin-top:auto;
}
<div class="container mainbody">
<div class="left">
<div class="left-bottom">
<img class="image-car" src="http://dummyimage.com/100x150&text=1">
</div>
</div>
<div class="container">
<div class="card">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
可使用的 codepen:https ://codepen.io/gc-nomade/pen/wvGXKKG
从您的评论中:
那么我怎样才能让一个网格项目粘在底部而另一个在中心呢?另外,是的,我想要上面链接中的 grid_layout
可能的方法
* {
margin: auto;
}
.mainbody {
display: grid;
grid-template-columns: 1fr 1fr;
text-align: center;
grid-gap: 5px;
min-height: 100vh;
background: #bee
}
.container .container {
display: grid; /* just a single cel to use layout properties */
}
.left {
margin: auto auto 0;
}
.card {
margin: auto 0 auto;
}
<div class="container mainbody">
<div class="left">
<div class="left-bottom">
<img class="image-car" src="http://dummyimage.com/100x150&text=1">
</div>
</div>
<div class="container">
<div class="card">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
推荐阅读
- javascript - 如何使用 Yup 检查字符串中的特殊字符?
- keycloak - 用户临时锁定的 Keycloak 自定义消息
- c# - 序列化时需要将父对象的值注入子对象
- android - 如何确保布局和其他地方的android上正确/直接的尺寸缩放?
- intellij-idea - 如何在不运行整个应用程序的情况下运行 IntelliJ 的实时编辑?
- angular-material - 当父母专注时读取子元素 - 可访问性
- android - 二进制 XML 文件第 13 行:膨胀类 EditText 时出错
- grafana - Prometheus 的简单累积增量
- c - Gnu - Arm 浮点到字符串( sprintf )
- javascript - 带有返回顶部功能的 JQuery 问题