最后在网格系统中保持图像的同线甚至是小图像

Question

我正在设计一个画廊。我目前的画廊外观如下所示。

​

但我想如果最后一张或第二张图片很小，仍然不应该像这样流动。

实际上，我想要下面的风格。

​

我当前的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

我认为你的图像有不同的高度。您可以简单地使用min-height修复此问题

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

Answer 2

在下面的css规则中删除padding。

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

另一种改变类css规则的方法。

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

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

还设置了

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

Answer 3

如果适合你的话试试this..consider吧。我刚清除了每三个图像的浮点值。

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