Question

我正在尝试创建4行和2列的图像列表。我仔细检查了我的CSS，但我似乎无法让右栏中的图像与左侧的图像重叠。这使得li，li p和li p a元素全部都离开了。我尝试在列之间创建一些空间，将宽度缩小到45％，并且所有边都有2.5％的边距，但没有运气。有什么建议吗？

HTML：

<div id="wrapper">
        <section>
          <ul id="gallery">
            <li>
              <a href = "img/image1.jpg">
               <img src = "img/image1.jpg" alt="">
               <p>Caption here</p>
               </a>
             </li>

            <li>
              ...
            </li>

CSS：

*{
    box-sizing: border-box;
    margin: 0;
}

body{

    font-family: 'Open Sans', Tahoma, sans-serif;
    max-width: 100%;
    background-color: #5F5E5E;
 }

     #gallery{
      margin: 0;
      padding: 0;
      list-style: none;
     }

     #gallery li{
      float: left;
      width: 45%;
      margin: 2.5%;
      background-color: #f5f5f5;
      color: #bdc3c7;
    }

    #gallery li a p {
      margin: 0;
      padding: 5%;
      font-size: 0.75em;
      color: #bdc3c7;
     }

Answer 1

您的图片很可能会溢出其容器（ *{ box-sizing: border-box; margin: 0; } body{ font-family: 'Open Sans', Tahoma, sans-serif; max-width: 100%; background-color: #5F5E5E; } #gallery{ margin: 0; padding: 0; list-style: none; } #gallery li{ float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; } #gallery li a p { margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; } #gallery li a{display:block} #gallery li img{width:100%;} ）。

尝试添加

<div id="wrapper">
    <section>
        <ul id="gallery">
            <li>
                <a href = "img/image1.jpg">
                    <img src = "http://lorempixel.com/400/400/fashion/1" alt="" />
                    <p>Caption here</p>
                </a>
            </li>
            <li>
                <a href = "img/image1.jpg">
                    <img src = "http://lorempixel.com/400/400/fashion/2" alt="" />
                    <p>Caption here</p>
                </a>
            </li>
            <li>
                <a href = "img/image1.jpg">
                    <img src = "http://lorempixel.com/400/400/fashion/4" alt="" />
                    <p>Caption here</p>
                </a>
            </li>
        </ul>
    </section>
</div>

这样图像将始终适合他们的容器。

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

Answer 2

稍微更改您的代码，如下所示。这个对我有用。让我知道它是否适合你。

sysdate

}

体{

<style>

 *{
box-sizing: border-box;
margin: 0;

}

font-family: 'Open Sans', Tahoma, sans-serif;
max-width: 100%;
background-color: #5F5E5E;

图库图像重叠

2 个答案: