tag breaks the grid layout

问题描述 投票：-1回答：1

我的学习项目的网格布局有问题。请帮帮我。我创建了网站的一部分，但是当我想通过标记将图像及其标题链接到URL时，整个布局就会中断。这是不带锚的代码。如何放置它们以保持网站外观？

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>

我将不胜感激。

@ EDIT好的，这是我的代码版本不完整。我可能需要重写整个代码，但是我需要知道为什么。为什么此标记会破坏代码？我认为这是我可以在工作结束时添加的一些边际内容：/。

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>
html css flexbox css-grid
1个回答
0
投票

只需将每个图像都包裹在这样的锚标记中

<a href="your url">
  <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="1" >
</a>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.