Question

我的CSS网格格式页面的一行出现问题，而不是将三张图片放在指定的列中。

这是我的HTML代码：

<html>
  <title></title>
  <head></head>
  <body>
    <div class="Main">
        <div class="Header Box">
          <div id="One"> 
            <img src="https://s1.postimg.org/2gy4am3oov/Satellite_over_earth_2.jpg" width="200px" height="126px"/>
          </div>
          <div id="Two"><p>UNIVERSIAL</p><p>TECHNOLOGIES</p>     
          </div>
          <div id="Three"> Blah blah blah 
          </div>
        </div>

        <div class = "Second Row">
          <div>
          Technology you can trust

  Ethersonic Technologies has been servicing Chicago and the surrounding suburbs since April 2008. We are a Certified (VOSB) Veteran Owned Small Business with the Federal Government and a member of the BBB (Better Business Bureau) with an A+ rating.

  Ethersonic specializes in Computer  diagnosis and repair, Security Camera Installation and repair and Network Installation and Repair  
        </div>
        <div>
          <img src="https://s1.postimg.org/284vrnvfsv/BBB_and_VOSB_Logos.jpg" width="300" height="187"/>
        </div>
      </div>
        <div class="Third Row">
          <div>
        <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203"
          </div>
          <div>
          <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203"
          </div>
          <div>
          <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203"
          </div>
      </div>
    </div>       
  </body>
</html>

问题在于标题为第三行的行。在这里：

<div class="Third Row">

这是我的CSS代码：

.Main{
  background-color: yellow;
  display: grid;
  grid-template-columns:(3, 1fr);
}

.Header.Box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: red;
  grid-gap: 0;
}

#One, #Two, #Three {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;  
}

.Second.Row{
  display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.Third.Row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: green;
}

问题在于标题为第三行

的CSS规则

.Third.Row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: green;
}

HTML-wise和CSS-wise， Third Row 的格式与第二行的格式相同，但出于某种原因，第三行的CSS规则不像第二行那样工作。

Answer 1

你的html存在一些问题。您不会关闭img代码。这样做你的第三行布局将按照你的定义（有三列）

<div class="Third Row">
  <div>
    <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203" /> <!-- add tag closing -->
  </div>
  <div>
    <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203" /> <!-- add tag closing -->
  </div>
  <div>
    <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203" /> <!-- add tag closing -->
  </div>

Codepen example

网格列行没有显示作为列

1 个答案: