我正在尝试在我的页面底部创建一个画廊，为什么我的 lightbox2 图像不在 each/in 行旁边？

Question

一直试图在我的页面底部创建一个画廊来完成我的最新网站，但由于某种原因，它们在不同的行上而不是彼此相邻。

HTML:

    <section id="galleries">
        <h2>Galleries</h2>    
        <article class="img-item">
            <figure>
                <a href="/images/martin/Photo24_21.jpg" rel="lightbox" >
                                        <span class="thumb-screen"></span>
                    <img src="/images/martin/Photo24_21.jpg" alt="Martin"/>
                </a>
            </figure>
        </article>
        <article class="img-item">
            <figure>
                <a href="/images/martin/Photo26_23.jpg" rel="lightbox" >
                                        <span class="thumb-screen"></span>
                    <img src="/images/martin/Photo26_23.jpg" alt="Martin"/>
                </a>
            </figure>
        </article>
        <article class="img-item">
            <figure>  
                <a href="/images/martin/PICT0647.JPG" rel="lightbox" >
                                        <span class="thumb-screen"></span>
                    <img src="/images/martin/PICT0647.JPG" alt="Martin"/>
                </a>
            </figure>
        </article>
      </section

CSS:

#galleries, #main-content
{
        line-height:25px;
        clear:both;
        width:auto;
        max-width:900px;
        margin:0 auto;
}

#galleries h2, #main-content h3
{
        border-bottom: 1px solid #D6D0C1;
        margin-bottom: 20px;
}

#galleries .img-item
{
        float:left;
        margin-right:25px;
}

#galleries .img-item a
{
        position:relative;
        display:block;
}

如有任何帮助，我们将不胜感激，这很奇怪，因为我的其中一个页面上的图片没有问题？

Answer 1

在查看您网站上的 css 后，我进行了以下更改以帮助您根据自己的喜好对图像进行布局。

CSS 改动：

/*Patch:Fixes issue with lightbox images not being displayed side by side */

/*removed .img-item img , You were making all child elements of #galleries 40% width*/
#galleries 
{
    /*changed from 40% to 60% to give a better looking aspect ratio*/
    width: 60%;
}

.img-item{

    /*Set the width of the image item containers*/
    width:25%;
}


.img-item img{

/*make sure the image doesn't become larger than its container*/
max-width:100%;

/* You have to give the image some height so the smaller ones do not stack up
   on top of each other at the end of the container*/
height:200px;
}

我正在尝试在我的页面底部创建一个画廊，为什么我的 lightbox2 图像不在 each/in 行旁边？

I'm trying to create a gallery at the bottom of my page, why aren't my lightbox2 images in next to each/in rows?

html

css

jquery

lightbox2