html - 如何将图像放在不同的列中?
问题描述
我不知道我所有的图像都在 1 列中。你能帮我把 1 张图片放在 1 列中吗?如果您也能解释为什么会发生这种情况,我将不胜感激。问题只在这里@media only screen and (min-width: 1024px)。非常感谢您的帮助,这意味着很多。我已经研究了几个小时,但无法弄清楚。 这就是它现在的样子,我认为网格有问题 这就是它应该的样子
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
object-fit: cover;
padding-top: 10px;
}
.container .box {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.container .box .dream {
display: flex;
flex-direction: column;
width: 34%;
}
.container .box .dream img {
width: 100%;
padding-bottom: 5px;
}
@media only screen and (max-width: 769px) {
.container .box {
flex-direction: column;
}
.container .box .dream {
width: 25%;
}
}
@media only screen and (min-width: 1024px) {
.container {
display: grid;
width: 70%;
margin: 2rem auto;
}
.container .box {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 5vw);
grid-gap: 1rem;
}
.gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery__item--1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
/** Alternative Syntax **/
/* grid-column: 1 / span 2; */
/* grid-row: 1 / span 2; */
}
.gallery__item--2 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 5;
/** Alternative Syntax **/
/* grid-column: 3 / span 2; */
/* grid-row: 1 / span 2; */
}
.gallery__item--3 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 7;
/** Alternative Syntax **/
/* grid-column: 5 / span 4;
grid-row: 1 / span 5; */
}
.gallery__item--4 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 7;
grid-row-end: 9;
/** Alternative Syntax **/
/* grid-column: 1 / span 4; */
/* grid-row: 3 / span 3; */
}
.gallery__item--5 {
grid-column-start: 3;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 5;
/** Alternative Syntax **/
/* grid-column: 1 / span 4; */
/* grid-row: 6 / span 3; */
}
.gallery__item--6 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 7;
grid-row-end: 9;
/** Alternative Syntax **/
/* grid-column: 5 / span 4; */
/* grid-row: 6 / span 3; */
}
.gallery__item--7 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 5;
grid-row-end: 7;
}
.gallery__item--8 {
grid-column-start: 5;
grid-column-end: 7;
grid-row-start: 5;
grid-row-end: 7;
}
.gallery__item--9 {
grid-column-start: 5;
grid-column-end: 7;
grid-row-start: 7;
grid-row-end: 9;
}
}
<!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="/css/styles.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="dream">
<figure class="gallery__item gallery__item--1">
<img src="/images/1.jpg" alt="Gallery image 1" class="gallery__img">
<figure class="gallery__item gallery__item--2">
<img src="/images/2.jpg" alt="Gallery image 2" class="gallery__img">
</figure>
<figure class="gallery__item gallery__item--3">
<img src="/images/3.jpg" alt="Gallery image 3" class="gallery__img">
</figure>
<figure class="gallery__item gallery__item--4">
<img src="/images/4.jpg" alt="Gallery image 4" class="gallery__img">
</figure>
<figure class="gallery__item gallery__item--5">
<img src="/images/5.jpg" alt="Gallery image 5" class="gallery__img">
</figure>
</div>
<div class="dream">
<figure class="gallery__item gallery__item--6">
<img src="images/6.jpg" alt="Gallery image 6" class="gallery__img">
</figure>
<figure class="gallery__item gallery__item--7">
<img src="images/7.jpg" alt="Gallery image 7" class="gallery__img">
</figure>
<figure class="gallery__item gallery__item--8">
<img src="images/8.jpg" alt="Gallery image 8" class="gallery__img">
</figure>
<figure class="gallery__item gallery__item--9">
<img src="images/9.jpg" alt="Gallery image 9" class="gallery__img">
</figure>
</div>
</body>
</html>
解决方案
首先,您没有关闭 html 文件中的 div 标签。
<body>
<div class="container grid">
<div class="box">
<div class="dream">
<img src="/images/1.jpg">
<img src="/images/2.jpg">
<img src="/images/3.jpg">
<img src="/images/4.jpg">
<img src="/images/5.jpg">
</div>
<div class="dream">
<img src="/images/6.jpg">
<img src="/images/7.jpg">
<img src="/images/8.jpg">
<img src="/images/9.jpg">
</div>
**</div>
</div>**
</body>
其次,在 min-width: 1024px 中使用网格对您来说很重要
如果您要在结果中绘制您想要的图像,将更容易回答您
推荐阅读
- c++ - vector::size() 是否可能返回错误值?
- c - 未初始化的局部变量是静态的吗?
- variables - 为什么 Webpack SASS-loader 不在线性梯度规则中转换 SASS 变量?
- matlab - 在 MATLAB 的 If 语句中使用多个条件的问题
- angular - Angular 7/Jasmine:在服务中对 Observable 进行单元测试时出现问题
- php - Ajax 拒绝 PHP 创建的 JSON 并带有“SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data”
- ssl - 通过代理进行 PKI 身份验证,python 2.6.6
- javascript - 使用 vue 显示动态数组
- apache-spark - 如何使用火花从hdfs加载多个文件
- python - 使用 send 修改生成器