我正在使用以下代码创建一个小型网络画廊。现在缩略图是垂直放置的,我喜欢它们在主图像下方水平运行。有没有人对如何这样做有任何建议?
<div id="content">
<script type="text/javascript">
function myshowImages(id) {
/**$(".bigPic").hide();
$("#pic-"+id).show();*/
$('.bigPic').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
</script>
<script>
$(document).ready(function () {
$('.email-sign-up').css({'marginBottom':'0px'});
})
</script>
<div class="product">
<div class="galerie">
<div class="bigPics">
<a href="insert" target="_blank">
<img src="insert" title="" alt="" id="pic-0" width="450" height="450" class="bigPic" name="bigPic" />
</a>
<a href="insert" target="_blank">
<img src="insert" title="" alt="" id="pic-1" width="450" height="450" class="bigPic" name="bigPic" style="display:none;" />
</a>
</div>
<div class="thumbnails">
<div class="mini-thumb">
<a href="javascript:myshowImages(0)" >
<img src="insert" title="" alt="" />
</a>
</div>
<div class="mini-thumb">
<a href="javascript:myshowImages(1)" >
<img src="insert" title="" alt="" />
</a>
</div>
最佳答案
div
环绕拇指的元素具有默认的 CSS 样式 display: block
,这会导致元素占用 100% 的可用水平空间。您可以使用以下规则更改此设置:
.mini-thumb {
display: inline-block;
}
附带说明,缩进良好的标记可以帮助您识别问题,例如缺少结束 </div>
标签,这可能会导致格式问题。
关于html - 格式化网络画廊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9746034/