我正在使用一个名为 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;}
}