html - 缩略图画廊不适合图像并排

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

问题是图像下方有两行文本的元素比其他元素高，如果您在包含 wrapper 上设置固定高度，则 float 会被踢到一边 .galleryItem它将解决您的问题

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