Bilder werden nicht ausgerichtet und haben unterschiedliche Höhen

Ich habe ein Problem mit Bildern, die in verschiedenen Höhen angezeigt werden und Text darunter nicht ausrichtet. Dies ist das Kennzeichen auf, ich habe eine Reihe von sechs Behälter 6 Bilder auf 14% COZBilder werden nicht ausgerichtet und haben unterschiedliche Höhen

  <div class="row"> 
       <div class="posts"> 
        <img src="images/bond.jpg" alt="quantum of solace"> 
        <h3 class="title">Quantum of Solace</h3> 
        <p class="post-info">PG13 | 106min</p> 
       </div> 
      </div>

Ich stelle jeden Beitrag anzuzeigen sind 6 von ihnen 2,5% Marge rechts ermöglicht. Ich habe versucht, Bild in ein Div-Bild zu verpacken und das Überlaufen versteckt, aber nicht funktioniert.

.row { 
    width: 100%; 
} 

.posts { 
    width: 14%; 
    float: left; 
    margin-right: 2.5%; 
} 
.posts img { 
    width: 100%; 
    max-width: 100%; 
    border-radius: 0.5em; 
}

Quelle

2016-07-22 Artis

scheint in gut zu funktionieren [diese Geige] (https://jsfiddle.net/ecmy1z7p/). Können Sie ein Snippet posten, das das Problem veranschaulicht? –

Ja, aber die Bilder, die Sie verwendet haben, sind alle die gleichen Proportionen, meine sind nicht – Artis

Ehm ... so ist Ihre Beschwerde, dass Bilder, die unterschiedliche Höhen haben, mit unterschiedlichen Höhen angezeigt werden? Das war nicht sehr klar. Was willst du dann? Möchten Sie, dass einige der Bilder vertikal gestreckt werden, um den Höhen anderer zu entsprechen? –

Wenn Sie die Anordnung der Knoten ändern können, können Sie den Text unter den Bildern ausrichten mit: display: table. Siehe das folgende Beispiel:

.table { 
 
    display: table ; 
 
} 
 

 
.row { 
 
    display: table-row ; 
 
} 
 

 
.header, .title, .post-info { 
 
    display: table-cell ; 
 
    width: 14%; 
 
    padding: 0 1.25% 0.25% 1.25% ; 
 
    vertical-align: top ; 
 
} 
 

 
.header img { 
 
    max-width: 100%; 
 
    border-radius: 0.5em; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
     <div class="header"> 
 
      <img src="https://upload.wikimedia.org/wikipedia/en/2/2d/Quantum_of_Solace_-_UK_cinema_poster.jpg" alt="quantum of solace"> 
 
     </div> 
 
     <div class="header"> 
 
      <img src="https://upload.wikimedia.org/wikipedia/en/6/66/E_t_the_extra_terrestrial_ver3.jpg" alt="E.T. the Extra-Terrestrial "> 
 
     </div> 
 
     <div class="header"> 
 
      <img src="https://upload.wikimedia.org/wikipedia/en/a/a2/Star_Wars_The_Force_Awakens_Theatrical_Poster.jpg" alt="Star Wars VII"> 
 
     </div> 
 
     <div class="header"> 
 
      <img src="https://upload.wikimedia.org/wikipedia/en/8/8e/DisneyCheshireCat.jpg" alt="Alice in Wonderland"> 
 
     </div> 
 
     <div class="header"> 
 
      <img src="https://upload.wikimedia.org/wikipedia/en/6/6c/XFilesMoviePoster.jpg" alt="The X-Files"> 
 
     </div> 
 
     <div class="header"> 
 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Poster_-_Gone_With_the_Wind_01.jpg/440px-Poster_-_Gone_With_the_Wind_01.jpg" alt="Gone with the Wind"> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <h4 class="title">Quantum of Solace</h4> 
 
     <h4 class="title">E.T. the Extra-Terrestrial </h4> 
 
     <h4 class="title">Star Wars: Episode VII The Force Awakens</h4> 
 
     <h4 class="title">Alice in Wonderland</h4> 
 
     <h4 class="title">The X-Files: Fight the Future</h4> 
 
     <h4 class="title">Gone with the Wind</h4> 
 
    </div> 
 
    <div class="row"> 
 
     <p class="post-info">PG13 | 106min</p> 
 
     <p class="post-info">G | 115min</p> 
 
     <p class="post-info">PG13 | 136min</p> 
 
     <p class="post-info">G | 187min</p> 
 
     <p class="post-info">PG13 | 121min</p> 
 
     <p class="post-info">G | 238min</p> 
 
    </div> 
 
</div>

Quelle

2016-07-26 02:54:50

Bilder werden nicht ausgerichtet und haben unterschiedliche Höhen

Antwort

Verwandte Themen