Html 在网格系统中，即使是最后的小图像，也要保持图像的线条一致

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

    @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;
}

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

实际上我想要下面的款式。

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

---

我认为你的照片有不同的高度。您只需使用

min height

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

---

删除下面css规则中的

填充

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

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

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

另一种更改以下calss css规则的方法

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

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

---

试试这个……如果你觉得合适的话…我刚刚清除了每三个图像的浮点值

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

---

例如，为

.grid-4

类设置

min height

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

---

我通过添加css3 flexbox修复了它

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

---

虽然我知道flexbox完全不支持浏览器，特别是11之前的IE。

您使用的是哪种样式布局，请尝试在引导样式中找到类似的

行

类型？您可以添加工作模式吗fiddle@sayful，只需移除所有标签，并检查是否与您想要的相同？最小高度即可。但我看不到你画廊里的图像。我只是想把所有的图像都放进去。检查并提供此代码笔的小提琴。填充：0；无法解决此问题。它会删除图像之间的填充。也无法解决此问题。请设置图像最大高度。它会将图像带到下一行。如果我知道最大高度，则最小高度有效。但是，如果图像超过最小高度，它将不起作用。然后使用img responsive类保持最小和最大高度限制。@sayful没有问题也添加最大高度