グリッドシステムで画像を同じラインにしても小さい画像にする

Question

ギャラリーを設計しています。現在のギャラリーの外観は次のとおりです。

しかし、最後または2番目の画像が小さくても、このように流れてはいけません。

実際に私は次のスタイルが欲しいです。

私の現在のhtmlは以下の通りです。

<div id="portfolio-items" class="grids portfolio-items"> 

<div id="portfolio-1" class="grid-4"> 
    <figure> 
     <a href="#"><img src="#/1/"></a> 
     <figcaption> 
      <h4>Qui modi aut et</h4> 
      <a href="#" rel="bookmark" class="button">Details</a> 
     </figcaption> 
    </figure> 
</div> 
<div id="portfolio-2" class="grid-4"> 
    <figure> 
     <a href="#"><img src="#/2/"></a> 
     <figcaption> 
      <h4>Qui modi aut et</h4> 
      <a href="#" rel="bookmark" class="button">Details</a> 
     </figcaption> 
    </figure> 
</div> 
<div id="portfolio-3" class="grid-4"> 
    <figure> 
     <a href="#"><img src="http://lorempixel.com/400/200/sports/1/"></a> 
     <br> 
     <br><br><br><br> 
     <figcaption> 
      <h4>Qui modi aut et</h4> 
      <a href="#" rel="bookmark" class="button">Details</a> 
     </figcaption> 
    </figure> 
</div> 
<div id="portfolio-3" class="grid-4"> 
    <figure> 
     <a href="#"><img src="#/1/"></a> 
     <figcaption> 
      <h4>Qui modi aut et</h4> 
      <a href="#" rel="bookmark" class="button">Details</a> 
     </figcaption> 
    </figure> 
</div> 
<div id="portfolio-3" class="grid-4"> 
    <figure> 
     <a href="#"><img src="#/1/"></a> 
     <figcaption> 
      <h4>Qui modi aut et</h4> 
      <a href="#" rel="bookmark" class="button">Details</a> 
     </figcaption> 
    </figure> 
</div> 
<div id="portfolio-3" class="grid-4"> 
    <figure> 
     <a href="#"><img src="#/2/"></a> 
     <figcaption> 
      <h4>Qui modi aut et</h4> 
      <a href="#" rel="bookmark" class="button">Details</a> 
     </figcaption> 
    </figure> 
</div> 
<div id="portfolio-3" class="grid-4"> 
    <figure> 
     <a href="#"><img src="#/1/"></a> 
     <figcaption> 
      <h4>Qui modi aut et</h4> 
      <a href="#" rel="bookmark" class="button">Details</a> 
     </figcaption> 
    </figure> 
</div> 
<div id="portfolio-3" class="grid-4"> 
    <figure> 
     <a href="#"><img src="#/1/"></a> 
     <figcaption> 
      <h4>Qui modi aut et</h4> 
      <a href="#" rel="bookmark" class="button">Details</a> 
     </figcaption> 
    </figure> 
</div> 
<div id="portfolio-3" class="grid-4"> 
    <figure> 
     <a href="#"><img src="#/2/"></a> 
     <figcaption> 
      <h4>Qui modi aut et</h4> 
      <a href="#" rel="bookmark" class="button">Details</a> 
     </figcaption> 
    </figure> 
</div> 
<div id="portfolio-3" class="grid-4"> 
    <figure> 
     <a href="#"><img src="#/1/"></a> 
     <figcaption> 
      <h4>Qui modi aut et</h4> 
      <a href="#" rel="bookmark" class="button">Details</a> 
     </figcaption> 
    </figure> 
</div> 

と私のCSSは以下の通りです。

@media screen and (min-width: 768px) { 
.grids { 
zoom: 1; 
margin-left: -15px; 
margin-right: -15px; 
} 
.grids:before, .grids:after { 
display: table; 
content: ""; 
} 
.grids:after { 
clear: both; 
} 
.grids [class*="grid-"] { 
float: left; 
padding: 15px; 
vertical-align: top; 
} 

.grid-1 { 
width: 8.33333333%; 
} 

.grid-2 { 
width: 16.66666667%; 
} 

.grid-3 { 
width: 25%; 
} 

.grid-4 { 
width: 33.33333333%; 
} 

.grid-5 { 
width: 41.66666667%; 
} 

.grid-6 { 
width: 50%; 
} 

.grid-7 { 
width: 58.33333333%; 
} 

.grid-8 { 
width: 66.66666667%; 
} 

.grid-9 { 
width: 75%; 
} 

.grid-10 { 
width: 83.33333333%; 
} 

.grid-11 { 
width: 91.66666667%; 
} 

.grid-12 { 
width: 100%; 
} 
} 
.portfolio-items { 
font-size: 18px; 
font-size: 1.125rem; 
} 
.portfolio-items *:not(a) { 
-webkit-backface-visibility: hidden; 
backface-visibility: hidden; 
} 
.portfolio-items figure { 
position: relative; 
overflow: hidden; 
} 
.portfolio-items figure:hover figcaption { 
opacity: 1; 
-ms-transform: translateY(0px); 
-webkit-transform: translateY(0px); 
transform: translateY(0px); 
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s; 
-moz-transition: -moz-transform 0.4s, opacity 0.1s; 
transition: transform 0.4s, opacity 0.1s; 
} 
.portfolio-items figure:hover img { 
-ms-transform: translateY(-50px); 
-webkit-transform: translateY(-50px); 
transform: translateY(-50px); 
} 
.portfolio-items figcaption { 
position: absolute; 
background-color: #363f48; 
display: block; 
width: 100%; 
bottom: 0; 
padding: 17px 20px; 
text-align: center; 
opacity: 0; 
-ms-transform: translateY(100%); 
-webkit-transform: translateY(100%); 
transform: translateY(100%); 
-webkit-backface-visibility: hidden; 
backface-visibility: hidden; 
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; 
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; 
transition: transform 0.4s, opacity 0.1s 0.3s; 
} 
.portfolio-items img { 
-webkit-transition: -webkit-transform 0.4s; 
-moz-transition: -moz-transform 0.4s; 
transition: transform 0.4s; 
} 
.portfolio-items h4 { 
font-size: inherit; 
color: white; 
margin: 0 0 15px 0; 
} 
.portfolio-items .button { 
font-size: 15px; 
line-height: 1; 
padding: 8px 33px; 
background-color: #4CC1BE; 
color: #ffffff; 
} 

Answer 1

あなたの画像の高さが異なると思います。あなたは、単にCSSルール以下にpaddingを削除min-height

.grid-4 figure { 
    min-height:250px; /* what ever you want */ 
    max-height:250px; /* what ever you want */ 
} 

Answer 2

でこれを修正することができます。

.grids [class*="grid-"]{ 
    padding:0; 
} 

下記のcalssのCSSルールを変更する別の方法です。

.grids { 
    zoom: 1; 
    padding-left: 15px; 
    padding-right: 15px; 
} 

.grids [class*="grid-"] { 
    float: left; 
    margin: -15px; 
    vertical-align: top; 
} 

はまた、あなたが...私はちょうどすべての第三の画像のための浮動小数点値をクリアスーツ場合は、このthis..consider試してみてください

.grid-4 figure{ 
    max-height:250px; 
} 

Answer 3

を設定します。

  .grids .grid-4:nth-child(3n+3){ 
      clear:both; 
      } 

Answer 4

私はCSS3のフレキシボックスを追加することによってそれを修正例えばクラス

.grid-4 figure{ 
    min-height:250px; 
} 

Answer 5

をmin-heightを設定します。

.grids { 
    margin-left: -15px; 
    margin-right: -15px; 
    display: flex; 
    flex-wrap: wrap; 
} 

私はフレキシボックス11.あなたが使用しているスタイリングレイアウト