【发布时间】：2020-04-07 18:50:59
【问题描述】：
我的学习项目的网格布局有问题。请帮帮我。我制作了网站的一部分，但是当我想通过标记将图像及其标题链接到 URL 时，整个布局就会中断。这是没有 te 锚的代码。如何放置它们以保持网站的这种外观？
body{
margin:0px;
display:flex;
flex-direction:column;
}
nav {
position:fixed;
background:rgb(195, 44, 82);
width:100%;
top:0;
left:0;
box-shadow: 0px 2px 2px;
display:flex;
justify-content:flex-end;
}
.nav-list {
list-style-type:none;
display:flex;
margin:0;
}
li:hover{
background:#45567d;
}
li{
padding:1.5rem;
font-family:helvetica;
font-size:1.5rem;
}
a{
text-decoration:none;
color:white;
}
header{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size:18px;
width:100%;
color:rgb(195, 44, 82);
background: repeating-linear-gradient(
60deg, #383838, #404040 20%, #383838 60%);
height:100vh;
}
header > h1{
font-style:normal;
color:white;
font-size:50px;
font-family:helvetica;
}
header > h2{
font-weight:200;
font-family:sans-serif;
font-style:italic;
font-size:30px;
}
#projects{
background:#45567d;
display:grid;
grid-template-rows: auto auto auto;
grid-template-columns: 25vw 25vw 25vw;
justify-content:space-around;
padding-right:5vw;
padding-left:5vw;
}
#projects-text{
width:100%;
font-size:2rem;
font-family:helvetica;
color:white;
text-decoration: underline;
padding-top:3rem;
padding-bottom:2rem;
text-align:center;
grid-column-start:1;
grid-column-end:4;
}
img{
width:100%;
height:25vw;
object-fit:cover;
grid-row-start:2;
grid-row-end:3;
}
#projects>p{
background:#303841;
color:white;
grid-row-start:3;
margin-top:0;
padding:1.5rem;
font-size:1.3rem;
font-family:helvetica;
text-align:center;
}
<body>
<nav id="navbar">
<ul class="nav-list">
<li>
<a href="about">About</a>
</li>
<li>
<a href="work">Work</a>
</li>
<li>
<a href="contact">Contact</a>
</li>
</ul>
</nav>
<header id="welcome-section">
<h1 id="hi">Hey I am XXXXX</h1>
<h2>a web developer</h2>
</header>
<section id="projects">
<h1 id="projects-text">These are some of my projects</h1>
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="1" >
<p>Tribute Page</p>
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="2">
<p>Map Data Across the Globe</p>
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="3">
<p>Wikipedia Viewer</p>
</section>
</body>我将不胜感激。
@编辑 好的，这是我的损坏版本的代码。我可能需要重写整个代码，但我需要知道为什么。为什么这个标签会破坏代码？我认为这是我可以在工作结束时添加的一些边缘内容：/。
body{
margin:0px;
display:flex;
flex-direction:column;
}
nav {
position:fixed;
background:rgb(195, 44, 82);
width:100%;
top:0;
left:0;
box-shadow: 0px 2px 2px;
display:flex;
justify-content:flex-end;
}
.nav-list {
list-style-type:none;
display:flex;
margin:0;
}
li:hover{
background:#45567d;
}
li{
padding:1.5rem;
font-family:helvetica;
font-size:1.5rem;
}
a{
text-decoration:none;
color:white;
}
header{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size:18px;
width:100%;
color:rgb(195, 44, 82);
background: repeating-linear-gradient(
60deg, #383838, #404040 20%, #383838 60%);
height:100vh;
}
header > h1{
font-style:normal;
color:white;
font-size:50px;
font-family:helvetica;
}
header > h2{
font-weight:200;
font-family:sans-serif;
font-style:italic;
font-size:30px;
}
.projects{
background:#45567d;
display:grid;
grid-template-rows: auto auto auto;
grid-template-columns: 25vw 25vw 25vw;
justify-content:space-around;
padding-right:5vw;
padding-left:5vw;
}
#projects-text{
width:100%;
font-size:2rem;
font-family:helvetica;
color:white;
text-decoration: underline;
padding-top:3rem;
padding-bottom:2rem;
text-align:center;
grid-column-start:1;
grid-column-end:4;
}
img{
width:100%;
height:25vw;
object-fit:cover;
grid-row-start:2;
grid-row-end:3;
}
#projects>p{
background:#303841;
color:white;
grid-row-start:3;
margin-top:0;
padding: ;
font-size:1.3em;
font-family:helvetica;
text-align:center;
}
<body>
<nav id="navbar">
<ul class="nav-list">
<li>
<a href="about">About</a>
</li>
<li>
<a href="work">Work</a>
</li>
<li>
<a href="contact">Contact</a>
</li>
</ul>
</nav>
<header id="welcome-section">
<h1 id="hi">Hey I am XXXXX</h1>
<h2>a web developer</h2>
</header>
<section class="projects">
<h1>These are some of my projects</h1>
<a
href="https://codepen.io/freeCodeCamp/full/zNqgVx"
target="_blank"><img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="1" >
<p>Tribute Page</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/zNqgVx"
target="_blank">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="2">
<p>Map Data Across the Globe</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/zNqgVx"
target="_blank">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="3">
<p>Wikipedia Viewer</p>
</a>
</section>
</body>【问题讨论】：
-
那么我理解正确吗，您希望图像成为链接？
-
提供“损坏”的代码，以便我们了解您做错了什么
-
将您应用于图像的 CSS 设置（宽度/高度、网格参数）改为那些
a标签（使用类不将其应用于任何其他 a 标签），然后应用只有object-fit:cover;到图像“填充”那些a标签 -
Elman Huseynov 我希望图像和图像下的段落成为链接。