我正在学习更多关于CSS中的网格的知识。我已经创建了一个由四个图像和一个描述图像的文本框组成的网格。我不能让项目彼此对齐。我想让文本框在左边，图像在右边，但我不能让它彼此对齐。图像稍微靠右，但位置很低。我怎样才能使网格图像与文本框对齐？（文本在左边，图像在右边）
#grid-container{
width: 600px;
height: 600px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
#image{
height: 300px;
width: 350px;
}
.grid-item{
width: 300px;
height: 300px;
display: flex;
}
.grid-item:nth-of-type(1){
grid-column: 1 / 2;
grid-row: 1 / 2;
transform: translate(-50px,100px);
}
.grid-item:nth-of-type(2){
grid-column: 1 / 2;
grid-row: 2 / 2;
transform: translate(-0,100px);
}
.grid-item:nth-of-type(3){
grid-column: 2 / 2;
grid-row: 1 / 2;
transform: translate(-10px, -0px);
}
.grid-item:nth-of-type(4){
grid-column: 2 / 2;
grid-row: 2 / 2;
transform: translate(-5px,0px);
}
.overview{
display: flex;
width: 30%;
}
.overview-text{
text-align: center;
}
.flex-box{
display: flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<header>
<h1>How to layer and overlap elements</h1>
</header>
<div class="overview">
<div class="overview-text">
<h1>Overview Text</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="flex-box">
<div id = "grid-container">
<div class="grid-item">
<img id = "image" src = "Image">
</div>
<div class="grid-item">
<img id = "image" src = "Image/">
</div>
<div class="grid-item">
<img id = "image" src = "Image/">
</div>
<div class="grid-item">
<img id = "image" src = "Image">
</div>
</div>
</div>
</body>
</html>
1条答案
按热度按时间twh00eeo1#
你应该使用
.flex-box作为文本和网格图像的容器，我还将margin-left: 100px添加到网格中，因为它有溢出的转换：