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图像不在每行/每行中？

1 个答案: