为什么我的新div会影响之前的div？

时间：2018-09-23 07:22:43

标签： html css

因此，我在博客示例中使用CSS网格，并已制作了一个框（关于我）。第一个下方的三个框（书面文章）。一切都很好。

但是后来我在三个盒子之后又做了一个，它弄乱了上面的三个盒子。

由于某些原因，它确实弄乱了三个文章框中的第一个。它影响此框的宽度。

如果我注释掉最后一个div，它们都会自行调整为我想要的宽度。

我不知道发生了什么事。

我将在此处放置完整的HTML和CSS，以便您自己检查一下，并在注释掉我使用的最后一个div（具有“ g5”类的div）时看到的区别。

基本上，我只希望所有三个文章框都具有相同的大小，但是新的div弄乱了宽度，我不知道为什么。

P.S。我对CSS还是很陌生，因此我的编码绝对不优雅。

body {
  background-color: hsl(0, 0%, 80%);
  font-family: Futura, Tahoma, 'Handlee', cursive;
  height: auto;
  magrin: 0;
}
.header {
  display: grid;
  border-radius: 25px;
  margin: 5px;
  width: auto;
  background-image: url("https://thebluestimes.files.wordpress.com/2012/12/blue-background-white-lines-texture-background-451_1.jpg")
}
#pictureSelf {
  background-color: white;
  border: 2px solid grey;
  border-radius: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: auto;
  padding: 2px;
  width: 80px;
  height: 80px;
}
#ownerName {
  display: block;
  margin: 0 auto;
  align-text: center;
  font-size: 30px;
  color: white;
}
.container {
  display: grid;
  grid-template-columns: 1f, 1fr, 1fr, 1fr, 1fr, 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 15px;
  margin: 5px;
  padding: auto;
  padding-bottom: 0;
  width: auto;
}
.g1 {
  background-color: hsl(0, 0%, 90%);
  border-radius: 35px;
  height: auto;
  width: auto;
  grid-column: 1 / span 6;
  grid-row: 1;
  overflow: hidden;
}
h1 {
  font-size: 20px;
  text-align: center;
  margin: 20px 0 20px 0;
  padding: 5px;
  color: hsl(216, 70%, 50%);
}
h1 span {
  border: 5px dashed hsl(216, 70%, 50%);
  width: auto;
  padding: 5px;
  margin: 20px 0 20px 0;
}
#aboutMe {
  padding: 10px;
}
quote {
  display: flex;
  justify-content: flex-end;
  padding: 15px;
  font-style: italic;
}
.g2{
  display: inline-block;
  background-color: hsl(0, 0%, 90%);
  width: auto;
  height: 230px;
  border-radius: 35px;
  grid-column: 1 / span 2;
  grid-row: 2;
  overflow: hidden;
}
@keyframes summary1 {
  from {
    height: 220px;

  }
  to {
    height: 350px;
  }
}
.g2:hover {
  animation-name: summary1;
  animation-play-state:running; 
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-direction: linear;
  animation-fill-mode: forwards;
  transition: height linear;
}
.g3{
  display: inline-block;
  background-color: hsl(0, 0%, 90%);
  border-radius: 35px;
  height: 230px;
  width: auto;
  grid-column: 3 / span 2;
  grid-row: 2;
  overflow: hidden;

}
.g3:hover {
  animation-name: summary1;
  animation-fill-mode: forwards;
  animation-play-state:running; 
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-direction: linear;
}
.g4{
  display: inline-block;
  background-color: hsl(0, 0%, 90%);
  border-radius: 35px;
  height: 230px;
  width: auto;
  grid-row: 2;
  grid-column: 5 / span 2;
  overflow: hidden;

}
.g4:hover {
  animation-name: summary1;
  animation-play-state:running; 
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-direction: linear;
  animation-fill-mode: forwards;
  transition: height linear;
 
}
#buis1 {
  display: block;
  width: 200px;
  heigth: 100px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  border-radius: 25px;
}
#arT {
  text-align: center;
  margin-top: 0;
  text-decoration: underline;
}
#arTLink {
  text-align: center;
}
a:link {
  color: hsl(216, 70%, 50%);
  border: 3px solid hsl(216, 70%, 50%);
  padding: 5px;
}
#arTLink a:hover {
  color: red;
  border: 3px dashed red;
}
#arT2 {
  padding: 10px;
}

.g5 {
  grid-column: 1 / span 6;
  grid-row: 3;
  width: auto;
  height: auto;
  background-color: hsl(0, 0%, 90%);
  border-radius: 25px;
}
iframe {
  display: flex;
  padding: 20px;
  margin: auto;
  width: 560px; 
  height: 315px; 
}
/*Media queries*/
@media (min-width:10px) and (max-width:500px) {
  .header {
    height: 20vh;
  }
    #pictureSelf {
    width: 20%;
    height: 70%;
    margin-top: 15px;
  }
  #ownerName {
   align-text: center;
   font-size: 20px;
   color: white;
  }
  h1 {
   font-size: 12px;
  }
  .g1 {
    width: auto;
    font-size: 10px;
  }
  quote {
    justify-content: center;
  }
  .g2 {
   grid-row: 3;
   width: auto;
   grid-column: 1 / span 6;
  }
  .g3 {
   grid-row: 4;
   grid-column: 1 / span 6;
  }
  .g4 {
   grid-row: 5;
   grid-column: 1 / span 6;
  }
  .g5 {
    grid-row: 6;
    width: auto;
    grid-column: 1 / span 6;
  }
  iframe {
    width: 90%;
    height: 90%;
  }
}
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <!--Header-->
  <section class="header">
    <img src="https://cdn.pixabay.com/photo/2012/04/13/21/07/user-33638_960_720.png" id="pictureSelf"></img>
  <p id="ownerName">Thomas Jefferson</p>
    </section>
  
  <!--Body-->
    <section class="container">
      
      <!--About Me-->
      <div class="g1">
        <h1><span>About Me</span></h1>
        <p id="aboutMe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus nisi risus, non cursus elit egestas id. Integer quis euismod urna, quis blandit neque. Phasellus vel facilisis dolor. Integer et tincidunt nunc, sodales aliquam quam. Nulla sagittis quam sit amet dolor vulputate vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vulputate justo non augue tincidunt, non vehicula augue cursus. Fusce tristique efficitur metus, ut tempus augue hendrerit eu. Nunc varius turpis quis elementum laoreet. Aliquam erat volutpat! </p>
        <quote style="font-family:cursive;">"The greatest danger for most of us is not that our aim is too high and we miss it,<br/> but that it is too low and we reach it." - Michelangelo</quote>
      </div>
      
      
      <!--My Articles-->
      
      <div class="g2"><img src="https://www.summitfundingsolutions.com/wp-content/uploads/2017/07/businessmen-shaking-hands-money-2-low_preview.jpeg" id="buis1"></img><p id="arT">Five Great Ways To Gain More Clients</p><p id="arTLink"><a href="www.google.com" >Read More</a></p><p id="arT2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus nisi risus, non cursus elit egestas id. Integer quis euismod urna, quis blandit neque. Phasellus vel facilisis dolor.</p></div>
  
      <div class="g3"><img src="https://freedesignfile.com/upload/2017/04/happy-family-HD-picture-03.jpg" id="buis1"></img><p id="arT">Spending Time With Loved Ones.</p><p id="arTLink"><a href="www.google.com" >Read More</a></p><p id="arT2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus nisi risus, non cursus elit egestas id. Integer quis euismod urna, quis blandit neque. Phasellus vel facilisis dolor.</p></div>

      <div class="g4"><img src="https://www.itsdiscovery.com/wp-content/uploads/2017/09/maxresdefault.jpg" id="buis1"></img><p id="arT">The Truth About Space.</p><p id="arTLink"><a href="www.google.com" >Read More</a></p><p id="arT2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus nisi risus, non cursus elit egestas id. Integer quis euismod urna, quis blandit neque. Phasellus vel facilisis dolor.</p></div>

<!--If you remove this div here the three div's above go back to intended width, each spread taking up equal space-->

      <div class="g5"><iframe src="https://www.youtube.com/embed/go4wo4WenQQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

      <div class="g6"></div>
      <div class="g7"></div>
      <div class="g8"></div>
  </section>
    
    
 
</body>

</html>

2 个答案:

答案 0 :(得分：2)

您的代码中有很多问题。使用<img></img>是错误的，应该只是<img>，而您定义的grid-template-columns是错误的。值之间不需要逗号。

body {
  background-color: hsl(0, 0%, 80%);
  font-family: Futura, Tahoma, 'Handlee', cursive;
  height: auto;
  margin: 0;
}
.header {
  display: grid;
  border-radius: 25px;
  margin: 5px;
  width: auto;
  background-image: url("https://thebluestimes.files.wordpress.com/2012/12/blue-background-white-lines-texture-background-451_1.jpg")
}
#pictureSelf {
  background-color: white;
  border: 2px solid grey;
  border-radius: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: auto;
  padding: 2px;
  width: 80px;
  height: 80px;
}
#ownerName {
  display: block;
  margin: 0 auto;
  align-text: center;
  font-size: 30px;
  color: white;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 15px;
  margin: 5px;
  padding: auto;
  padding-bottom: 0;
  width: auto;
}
.g1 {
  background-color: hsl(0, 0%, 90%);
  border-radius: 35px;
  height: auto;
  width: auto;
  grid-column: 1 / span 6;
  grid-row: 1;
  overflow: hidden;
}
h1 {
  font-size: 20px;
  text-align: center;
  margin: 20px 0 20px 0;
  padding: 5px;
  color: hsl(216, 70%, 50%);
}
h1 span {
  border: 5px dashed hsl(216, 70%, 50%);
  width: auto;
  padding: 5px;
  margin: 20px 0 20px 0;
}
#aboutMe {
  padding: 10px;
}
quote {
  display: flex;
  justify-content: flex-end;
  padding: 15px;
  font-style: italic;
}
.g2{
  display: inline-block;
  background-color: hsl(0, 0%, 90%);
  width: auto;
  height: 230px;
  border-radius: 35px;
  grid-column: 1 / span 2;
  grid-row: 2;
  overflow: hidden;
}
@keyframes summary1 {
  from {
    height: 220px;

  }
  to {
    height: 350px;
  }
}
.g2:hover {
  animation-name: summary1;
  animation-play-state:running; 
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-direction: linear;
  animation-fill-mode: forwards;
  transition: height linear;
}
.g3{
  display: inline-block;
  background-color: hsl(0, 0%, 90%);
  border-radius: 35px;
  height: 230px;
  width: auto;
  grid-column: 3 / span 2;
  grid-row: 2;
  overflow: hidden;

}
.g3:hover {
  animation-name: summary1;
  animation-fill-mode: forwards;
  animation-play-state:running; 
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-direction: linear;
}
.g4{
  display: inline-block;
  background-color: hsl(0, 0%, 90%);
  border-radius: 35px;
  height: 230px;
  width: auto;
  grid-row: 2;
  grid-column: 5 / span 2;
  overflow: hidden;

}
.g4:hover {
  animation-name: summary1;
  animation-play-state:running; 
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-direction: linear;
  animation-fill-mode: forwards;
  transition: height linear;
 
}
#buis1 {
  display: block;
  width: 200px;
  heigth: 100px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  border-radius: 25px;
}
#arT {
  text-align: center;
  margin-top: 0;
  text-decoration: underline;
}
#arTLink {
  text-align: center;
}
a:link {
  color: hsl(216, 70%, 50%);
  border: 3px solid hsl(216, 70%, 50%);
  padding: 5px;
}
#arTLink a:hover {
  color: red;
  border: 3px dashed red;
}
#arT2 {
  padding: 10px;
}

.g5 {
  grid-column: 1 / span 6;
  grid-row: 3;
  width: auto;
  height: auto;
  background-color: hsl(0, 0%, 90%);
  border-radius: 25px;
}
iframe {
  display: flex;
  padding: 20px;
  margin: auto;
  width: 560px; 
  height: 315px; 
}
/*Media queries*/
@media (min-width:10px) and (max-width:500px) {
  .header {
    height: 20vh;
  }
    #pictureSelf {
    width: 20%;
    height: 70%;
    margin-top: 15px;
  }
  #ownerName {
   align-text: center;
   font-size: 20px;
   color: white;
  }
  h1 {
   font-size: 12px;
  }
  .g1 {
    width: auto;
    font-size: 10px;
  }
  quote {
    justify-content: center;
  }
  .g2 {
   grid-row: 3;
   width: auto;
   grid-column: 1 / span 6;
  }
  .g3 {
   grid-row: 4;
   grid-column: 1 / span 6;
  }
  .g4 {
   grid-row: 5;
   grid-column: 1 / span 6;
  }
  .g5 {
    grid-row: 6;
    width: auto;
    grid-column: 1 / span 6;
  }
  iframe {
    width: 90%;
    height: 90%;
  }
}
<!--Header-->
  <section class="header">
    <img src="https://cdn.pixabay.com/photo/2012/04/13/21/07/user-33638_960_720.png" id="pictureSelf">
  <p id="ownerName">Thomas Jefferson</p>
    </section>
  
  <!--Body-->
    <section class="container">
      
      <!--About Me-->
      <div class="g1">
        <h1><span>About Me</span></h1>
        <p id="aboutMe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus nisi risus, non cursus elit egestas id. Integer quis euismod urna, quis blandit neque. Phasellus vel facilisis dolor. Integer et tincidunt nunc, sodales aliquam quam. Nulla sagittis quam sit amet dolor vulputate vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vulputate justo non augue tincidunt, non vehicula augue cursus. Fusce tristique efficitur metus, ut tempus augue hendrerit eu. Nunc varius turpis quis elementum laoreet. Aliquam erat volutpat! </p>
        <quote style="font-family:cursive;">"The greatest danger for most of us is not that our aim is too high and we miss it,<br/> but that it is too low and we reach it." - Michelangelo</quote>
      </div>
      
      
      <!--My Articles-->
      
      <div class="g2"><img src="https://www.summitfundingsolutions.com/wp-content/uploads/2017/07/businessmen-shaking-hands-money-2-low_preview.jpeg" id="buis1"><p id="arT">Five Great Ways To Gain More Clients</p><p id="arTLink"><a href="www.google.com" >Read More</a></p><p id="arT2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus nisi risus, non cursus elit egestas id. Integer quis euismod urna, quis blandit neque. Phasellus vel facilisis dolor.</p></div>
  
      <div class="g3"><img src="https://freedesignfile.com/upload/2017/04/happy-family-HD-picture-03.jpg" id="buis1"><p id="arT">Spending Time With Loved Ones.</p><p id="arTLink"><a href="www.google.com" >Read More</a></p><p id="arT2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus nisi risus, non cursus elit egestas id. Integer quis euismod urna, quis blandit neque. Phasellus vel facilisis dolor.</p></div>

      <div class="g4"><img src="https://www.itsdiscovery.com/wp-content/uploads/2017/09/maxresdefault.jpg" id="buis1"><p id="arT">The Truth About Space.</p><p id="arTLink"><a href="www.google.com" >Read More</a></p><p id="arT2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus nisi risus, non cursus elit egestas id. Integer quis euismod urna, quis blandit neque. Phasellus vel facilisis dolor.</p></div>

<!--If you remove this div here the three div's above go back to intended width, each spread taking up equal space-->

      <div class="g5"><iframe src="https://www.youtube.com/embed/go4wo4WenQQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

      <div class="g6"></div>
      <div class="g7"></div>
      <div class="g8"></div>
  </section>

答案 1 :(得分：0)

嘿，所以我注意到了您的主要问题，您两次定义了.g2，.g3和.g4的css属性。这是您的CSS：

 .g4{
display: inline-block;
background-color: hsl(0, 0%, 90%);
border-radius: 35px;
height: 230px;
width: auto;
grid-row: 2;
grid-column: 5 / span 2;
overflow: hidden;

这是您的第二个：-注意此处的网格列不同

 .g4 {
 grid-row: 5;
 grid-column: 1 / span 6;
}

您正在定义网格列和网格行两次，它们是不同的值

相关问题
最新问题