html - 格式化网络画廊

Question

我正在使用以下代码创建一个小型网络画廊。现在缩略图是垂直放置的，我喜欢它们在主图像下方水平运行。有没有人对如何这样做有任何建议？

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

Answer 1

div环绕拇指的元素具有默认的 CSS 样式 display: block ，这会导致元素占用 100% 的可用水平空间。您可以使用以下规则更改此设置:

.mini-thumb {
    display: inline-block;
}

• display property
• DEMO

附带说明，缩进良好的标记可以帮助您识别问题，例如缺少结束 </div>标签，这可能会导致格式问题。