图库图像重叠答案

【问题标题】：Gallery images overlapping图库图像重叠
【发布时间】：2015-06-27 21:23:44
【问题描述】：

我正在尝试创建 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;
     }

【问题讨论】：

你能发布你的确切 html 并且也许把小提琴放在一起吗？
这是小提琴：jsfiddle.net/5f7k1jnt 显示的方向不是很好，但每张图片都是 415 x 279 像素。

标签： html css

【解决方案1】：

您的图像很可能溢出了它们的容器（a）。

尝试添加

#gallery li a{display:block}
#gallery li img{width:100%;}

这样图像将始终适合其容器。

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

【讨论】：

【解决方案2】：

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

<style>

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

}

身体{

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

}

.box{
  position: relative;
  float: left;
  width: 20%;
  padding-bottom: 20%;
  margin: 10px 0.5% 0px 0px;
  background: #dd8;
  border-radius: 7px;
 }

 .innerbox{
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
left: 10px;
overflow: hidden;
}


.innerbox img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
    <div class="box">
        <div class="innerbox">
            <img src="image1.jpg" alt="">
            <div class="title">Title here</div>
        </div>
    </div>
    <div class="box">
        <div class="innerbox">
            <img src="image2.jpg" alt="">
            <div class="title">Title here</div>
        </div>
    </div>
</body>

【讨论】：