Zeile der Rasterspalten, die nicht als Spalten angezeigt werden

Ich habe ein Problem mit einer Zeile meiner CSS-Raster-formatierten Seite und platziere die drei Bilder nicht in den dafür vorgesehenen Spalten.Zeile der Rasterspalten, die nicht als Spalten angezeigt werden

Hier ist mein HTML-Code:

<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>

Das Problem mit der Reihe ist berechtigt dritte Zeile. Hier:

<div class="Third Row">

Und hier ist mein CSS-Code:

.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; 
}

Das Problem mit der CSS-Regel liegt den Titel dritte Zeile

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

sowohl HTML-weise und CSS-weise , Dritte Zeile, ist das gleiche wie zweite Zeile formatiert, aber für einige Grund die CSS-Regel für Dritte Reihe funktioniert nicht, wie es für zweite Reihe funktioniert.

Quelle

2017-10-26 codebwoy

Sie haben einige Probleme mit Ihrem HTML. Sie schließen die img Tags nicht. tun, dass Ihr Layout für die dritte Reihe arbeiten, wie Sie es definiert haben (mit drei Spalten)

<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>

Quelle

2017-10-26 21:39:47 eltonkamami

dank soooo much! Ich empfehle eine gute Übung ist immer die Bilder Tags im Voraus zu schließen hahaha: D – codebwoy

Zeile der Rasterspalten, die nicht als Spalten angezeigt werden

Antwort

Verwandte Themen