HTML: Spalten schweben überall

Meine Website zeigt verschiedene Artikel jeweils in einem Thumbnail. Das Problem ist, dass die Thumbnails überall zu schweben scheint. Sie sind nicht so ausgerichtet, wie es sein sollte.HTML: Spalten schweben überall

So sieht mein HTML-Code aus.

</head> 
    <body> 


     <div class="top-bar"> 
      <div class="logo"></div> 
     </div> 


     <div class="title-bar"> 
     </div> 

     <br></br> 


        <div class="col-md-4"> 
         <div class="thumbnail"> 
          <img alt="300x200" src="[PIC]" width="300" /> 
          <div class="caption"> 
           <h3> 
            [Name] 
           </h3> 
           <p> 
            [Text] 
           </p> 
           <p> 
            <a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a> 
           </p> 
          </div> 
         </div> 
        </div> 


          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

    </div> 


</body>

Das Ergebnis ist, dass die Spalten nicht ausgerichtet sind. Es gibt 3 Spalten nebeneinander, aber die Höhe unterscheidet sich ebenso wie die Position auf der Seite. Wie kann ich das lösen?

Jetzt sieht es aus wie eine Treppe wie in den Code mit dem

Ich möchte: Box 1. Box2. Box 3.

Quelle

2017-08-31 Robbert

Verwenden Sie ein Framework (z. B. Bootstrap)? Was ist das Layout, das du erwartest? –

Ja, ich benutze Bootstrap. Was ich erwarte ist, dass jede "Box" (Thumbnail in HTML) in der gleichen Zeile ist. Nicht wie eine Treppe. – Robbert

Bootstrap 3-Spalten-Layout wird wie

<div class="col-md-12"> 
<div class="row"> 
    <div class="col-md-4">.col1</div> 
    <div class="col-md-4">.col2</div> 
    <div class="col-md-4">.col3</div> 
</div> 
</div>

gleiche Höhe zu halten für alle Boxen gleiche Höhe zuweisen für alle Bilder, h3 und p-Tags (die in der Box sind)

Beispiel Snippet https://bootsnipp.com/snippets/featured/store-product-layout

und in Ihrem HTML-Code gibt es viele schließen </div> Tags überprüfen HTML-Validierungen einmal.

Quelle

2017-08-31 15:45:03 Znaneswar

HTML: Spalten schweben überall

Antwort

Verwandte Themen