thumbnail gallery不适合的图像并排

Question

我正在使用名为galleryItem的类将缩略图图像与标题一起分组，然后使用Lightbox作为图库查看图像。

我的问题是让图像保持并排。

，这里是我的html：

<div class="contents"> 
     <div class="galleryItem"> 
     <a href="img/watermelon.jpg" rel="lightbox[menu]"><img src="img/watermelon.jpg" title="Vanilla" alt="Watermelon" width="90px" height="110px"></a> 
     <p.smallText>Vanilla</p> 

    </div> 

    <div class="galleryItem"> 
     <a href="img/strawberry.jpg"rel="lightbox[menu]"><img src="img/strawberry.jpg" alt="Watermelon" width="90px" height="110px" ></a> 
     <p.smallText>Chocolate</p> 

    </div> 
    <div class="galleryItem"> 
     <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/chips.jpg" alt="Watermelon" width="90px" height="110px" ></a> 
     <p.smallText>Strawberry Sorbet</p> 

    </div> 
    <div class="galleryItem"> 
     <a href="img/chips.jpg"rel="lightbox[menu]"><img src="img/strawberry.jpg" alt="Watermelon" width="90px" height="110px" ></a> 
      <p.smallText>Roasted Strawberry</p> 

    </div> 
    <div class="galleryItem"> 
     <a href="img/assortment.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon" width="90px" height="110px"></a> 
     <p.smallText>Whiskey Pecan</p> 

    </div> 
    <div class="galleryItem"> 
     <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a> 
     <p.smallText>Pomegranate Sorbet</p> 

    </div> 
    <div class="galleryItem"> 
     <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a> 
     <p.smallText>Salty Caramel</p> 

    </div> 
    <div class="galleryItem"> 
     <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a> 
      <p.smallText>Mint Chip</p> 

    </div> 
    <div class="galleryItem"> 
     <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a> 
      <p.smallText>Peanut Butter Chip</p> 

    </div> 
    <div class="galleryItem"> 
     <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a> 
     <p.smallText>Nutella</p> 

    </div> 
    <div class="galleryItem"> 
     <a href="#"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a> 
      <p.smallText>Mango Sorbet</p> 

    </div> 
    <div class="galleryItem"> 
     <a href="#"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a> 
      <p.smallText>Raspberry Lemon Yogurt</p> 

    </div> 
    <div class="galleryItem"> 
     <a href="#"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a> 
     <p.smallText>Cookies and Cream</p> 

    </div> 



    </div> <!--end contents --> 

这里是我的CSS：

.contents { 
    width: 80%; 
    margin: 20px auto; 
    overflow: hidden; 
} 
.galleryItem { 
    color: #797478; 
    font: 10px/1.5 Verdana, Helvetica, sans-serif; 
    float: left; 

    width: 16%; 
    margin: 2% 2% 80px 2%; 

} 

.galleryItem h3 { 
    text-transform: uppercase; 
} 

.galleryItem img { 
    max-width: 100%; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 

.galleryItem img:hover { opacity:0.4; 
filter:alpha(opacity=40); /* For IE8 and earlier */ 
} 
.galleryItem h3:hover {text-size:large; color:rgb(128, 0, 0);} 

/* MEDIA QUERIES*/ 
@media only screen and (max-width : 940px), 
only screen and (max-device-width : 940px){ 
    .galleryItem {width: 21%;} 
} 

@media only screen and (max-width : 720px), 
only screen and (max-device-width : 720px){ 
    .galleryItem {width: 29.33333%;} 
} 

@media only screen and (max-width : 530px), 
only screen and (max-device-width : 530px){ 
    .galleryItem {width: 46%;} 
} 

@media only screen and (max-width : 320px), 
only screen and (max-device-width : 320px){ 
    .galleryItem {width: 96%;} 
    .galleryItem img {width: 96%;} 
    .galleryItem h3 {font-size: 18px;} 
    .galleryItem p, {font-size: 18px;} 
} 

Answer 1

的问题是与图像下方两行文本的项目比其他项目高，其中有你浮法踢到一边，如果你设置一个固定的高度在包含包装.galleryItem它将解决您的问题

.galleryItem { 
    color: #797478; 
    font: 10px/1.5 Verdana, Helvetica, sans-serif; 
    float: left; 
    width: 16%; 
    margin: 2% 2% 80px 2%; 
    height: 200px; 
}