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规则中的dict。

padding

更改低于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;
}

Answer 3

试试这个..考虑这个适合你...我只是清除了每三个图像的浮动值。

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

Answer 4

为min-height类设置.grid-4，例如

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

Answer 5

我通过添加css3 flexbox来修复它。

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

虽然我知道flexbox在11之前并不支持所有浏览器特别是IE。

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

5 个答案: