html - 在 CSS 元素网格中对齐文本
问题描述
我制作了这个 CSS 网格。我还在练习使用 CSS 网格,所以我试图模仿这个网站。我想将文本放置在与我链接到的模板相同的位置。
但是正确的方法是如何做到这一点的呢?目前链接在左上角。
我应该在第一个 div 标签内创建另一个 div,还是最好的方法是什么?
此致。
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
box-sizing: border-box;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/7;
height: 700px;
}
.item2 {
grid-row: 1 / 1;
grid-column: 7/13;
height: 340px;
}
.item3 {
grid-row: 2 / 3;
grid-column: 7/10;
height: 350px;
}
.item4 {
grid-row:2/3;
grid-column: 10/13;
height: 350px;
}
a {
font-size: 30px;
}
@media only screen and (max-width: 600px) {
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/13;
height: 350px;
}
.item2 {
grid-row: 3 / 3;
grid-column: 1/13;
height: 200px;
}
.item3 {
grid-row: 4 / 5;
grid-column: 1 / 7;
height: 200px;
}
.item4 {
grid-row: 4 / 5;
grid-column: 7 / 13;
height: 200px;
}
}
/*
.nested {
display:grid;
grid-template-columns:repeat(3,1fr);
grid-gap:1em;
}
.nested > div {
border:1px solid red;
grid-auto-rows: 70px;
padding:1em;
}
*/
<div class="wrapper">
<div class="item1">
<a href="#">Watch a tiny cat taking a bath</a>
</div>
<div class="item2">
<a href="#">Spain: Take a virtual tour</a>
</div>
<div class="item3">
<a href="#">5 Tips to create your garden</a>
</div>
<div class="item4">
<a href="#">10 Movies you need to see</a>
</div>
</div>
解决方案
将此添加到项目
display: flex;
justify-content: flex-end;
flex-direction: column;
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
box-sizing: border-box;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/7;
height: 700px;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.item2 {
grid-row: 1 / 1;
grid-column: 7/13;
height: 340px;
}
.item3 {
grid-row: 2 / 3;
grid-column: 7/10;
height: 350px;
}
.item4 {
grid-row:2/3;
grid-column: 10/13;
height: 350px;
}
a {
font-size: 30px;
}
@media only screen and (max-width: 600px) {
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/13;
height: 350px;
}
.item2 {
grid-row: 3 / 3;
grid-column: 1/13;
height: 200px;
}
.item3 {
grid-row: 4 / 5;
grid-column: 1 / 7;
height: 200px;
}
.item4 {
grid-row: 4 / 5;
grid-column: 7 / 13;
height: 200px;
}
}
/*
.nested {
display:grid;
grid-template-columns:repeat(3,1fr);
grid-gap:1em;
}
.nested > div {
border:1px solid red;
grid-auto-rows: 70px;
padding:1em;
}
*/
<div class="wrapper">
<div class="item1">
<a href="#">Watch a tiny cat taking a bath</a>
</div>
<div class="item2">
<a href="#">Spain: Take a virtual tour</a>
</div>
<div class="item3">
<a href="#">5 Tips to create your garden</a>
</div>
<div class="item4">
<a href="#">10 Movies you need to see</a>
</div>
</div>
推荐阅读
- powerbi - 使用电源自动化桌面刷新 powerpivot 数据连接
- r - 比较一个值和一个 nx1 矩阵 R
- arrays - 我们如何在 laravel 收银员的任何订阅中获得未使用的时间成本?
- sql - SQL 按行连续重复值
- javascript - 从传入的 mqtt 推送更新 alpinejs 变量
- reactjs - 将 Firebase 与 React 结合使用时出现评级问题
- java - java Dash版本中unicode的正则表达式
- filtering - WMI 筛选器以排除 OU(或其他选项?)
- php - 内部重定向后在 AdSense 中保留引荐来源网址
- asp.net-core - ASP.NET Core Webapi (3.x) 自定义 ModelBinder 总是返回空对象