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