画像が揃っておらず、高さが異なる

Question

異なる高さとテキストの下に表示されている画像に問題があります。 これは私は14％のCOZに各ポストを設定してい6個のイメージ

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

を表示するために、6行容器を有する、マークアップされ、2.5％のマージン右を可能にするそれらの6があります。私はdivにイメージをラップしようとし、それを隠してオーバーフローするように設定しましたが、うまくいきませんでした。 表示：表あなたはノードの配置を変更することができる場合

.row { 
    width: 100%; 
} 

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

Answer 1

は、あなたが使用して画像下のテキストを揃えることができます。次の例を参照してください。

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