javascript - 在我做完所有事情后，我的所有照片都找不到课程
问题描述
我正在尝试使用网格 CSS（我对 HTML/CSS 很陌生）我的目标是使照片是 1fr 1fr 1fr 网格。但只有三个有效。如您所见，大声笑。我正在关注来自https://www.youtube.com/watch?v=5bMdjkfvONE&t=2629s的视频，除了我什么都不知道。content-wrapper/portfolio-item-wrapper/portfolio-img-background 的代码不确定为什么在我添加照片后它会破坏它我不知道为什么要请任何帮助会很有帮助。
/* master styles */
.body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* NAV STYLES */
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display: flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color: black;
}
/* portfolio styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>page title</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
<a href="index.html">Home</a>
</div>
<div class="nav-link-wrapper">
<a href="about.html">About</a>
</div>
</div>
<div class="right-side">
<div class="brand">
<div> MICHAEL MULHOLLAND </div>
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio1.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/crondose.png"
</div>
<div class="sybtitle">
portfolio colum 1
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio2.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/dailysmarty.png"
</div>
<div class="subtitle">
portfolio colum 2
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio3.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/dashtrack.png" </div>
<div class="subtitle">
portfolio colum 3
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio4.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/devcamp.png" </div>
<div class="subtitle">
portfolio colum 4
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio5.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/devtrunk.png" </div>
<div class="subtitle">
portfolio colum 5
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio6.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/edutechional.png" </div>
<div class="subtitle">
portfolio colum 6
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio7.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/eventbrite.png" </div>
<div class="subtitle">
portfolio colum 7
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio8.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/ministry-safe.png" </div>
<div class="subtitle">
portfolio colum 8
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio9.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/open-devos.png" </div>
<div class="subtitle">
portfolio colum 9
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio10.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/quip.png" </div>
<div class="subtitle">
portfolio colum 10
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio11.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/shop-hacker.png" </div>
<div class="subtitle">
portfolio colum 11
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio12.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/toastability.png" </div>
<div class="subtitle">
portfolio colum 12
</div>
</div>
</div>
</div>
</div>
</body>
</html>解决方案
标签上有一些错误的关闭</div>和缺少关闭。><img>
例如，您<div class="portfolio-items-wrapper">在关闭第一个<div class="portfolio-item-wrapper"></div>.
所以我建议你检查你的代码，检查你的 DIV 订单并正确打开和关闭它们。
另外你必须检查你的标签，有一些关闭>丢失。
然后它将起作用。
我发布了您的代码，并进行了以下更正。
/* master styles */
.body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* NAV STYLES */
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display: flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color: black;
}
/* portfolio styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>page title</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
<a href="index.html">Home</a>
</div>
<div class="nav-link-wrapper">
<a href="about.html">About</a>
</div>
</div>
<div class="right-side">
<div class="brand">
<div> MICHAEL MULHOLLAND </div>
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio1.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/crondose.png">
</div>
<div class="sybtitle">
portfolio colum 1
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio2.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/dailysmarty.png">
</div>
<div class="subtitle">
portfolio colum 2
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio3.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/dashtrack.png">
<div class="subtitle">
portfolio colum 3
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio4.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/devcamp.png">
<div class="subtitle">
portfolio colum 4
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio5.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/devtrunk.png">
<div class="subtitle">
portfolio colum 5
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio6.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/edutechional.png">
<div class="subtitle">
portfolio colum 6
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio7.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/eventbrite.png">
<div class="subtitle">
portfolio colum 7
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio8.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/ministry-safe.png">
<div class="subtitle">
portfolio colum 8
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio9.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/open-devos.png">
<div class="subtitle">
portfolio colum 9
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio10.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/quip.png">
<div class="subtitle">
portfolio colum 10
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio11.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/shop-hacker.png">
<div class="subtitle">
portfolio colum 11
</div>
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio12.jpg)">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/toastability.png">
<div class="subtitle">
portfolio colum 12
</div>
</div>
</div>
</div>
</div>
</body>
</html>推荐阅读
- reactjs - 在发送下一个请求之前等待上一个 axios 响应完成
- apexcharts - Apexcharts 热图中的奇怪颜色
- javascript - Puppeteer：将截获的图像请求的 URL 更改为 base64 图像
- image-processing - NetVips：使用 1 个波段创建复合并应用 icc 配置文件
- javascript - 我已经建立了一个多页网站，并且必须使其成为一个双语网站，可以将所有内容从英语翻译成法语，我该怎么做？
- codemirror - codemirror 加载资源失败：net::ERR_FILE_NOT_FOUND file://themes.googleusercontent.com
- python - Python 函数无法启动：Microsoft.WindowsAzure.Storage
- c - 我还没有找到答案，为什么在 switch case 中 continue 会影响 switch 外部的循环，但 break 不会“破坏”循环？
- css - 由于媒体查询，如何解决这个 css 转换问题？
- swift - 赢得比赛时出现一个按钮