форматирование веб-галереи - PullRequest
Новая
       6

форматирование веб-галереи

1 голос
/ 17 марта 2012

Я использую следующий код для создания небольшой веб-галереи.Прямо сейчас миниатюры располагаются вертикально, и идентично им, чтобы они проходили горизонтально под основным изображением.у кого-нибудь есть предложения как это сделать? 

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

1 Ответ

1 голос
/ 17 марта 2012

Элементы div, обертывающие ваши большие пальцы, имеют стиль CSS по умолчанию display: block, в результате чего элемент занимает 100% доступного ему горизонтального пространства. Вы можете изменить это с помощью следующего правила: 

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

В качестве дополнительного примечания, хорошо размеченная разметка может помочь вам выявить такие проблемы, как отсутствие закрывающих тегов </div>, которые могут способствовать возникновению проблем с форматированием.

...