css - 问题混合位置 :absolute with responsive layout

Question

我不完全确定我在追求什么是可能的，但目前我有一个无序列表，在桌面模式下将使用 display: inline-block 水平显示两个图像。然而，当处于平板电脑/纵向模式时，显示切换为 block 以使无序列表以通常的方式垂直显示。

然而，事情变得复杂了，我有两个小背景图像，我想覆盖在每个主要图像上。我已经使用绝对定位来实现这一点，但是当切换到纵向形式(宽度 < 750px)时，第二个主图像覆盖在第一个上。据推测，这主要是由于远离 display: inline-block 以及继续分别对主要背景图像和小背景图像使用相对/绝对定位。

我已经通过给每个 li 元素一个特定的高度 (500px) 来在一定程度上纠正这个问题，但是这样做的目的是让两个 li 粘在一起，当使用固定高度时最终会出现一个间隙(由于每个 li 都有一个宽度为 100%(因此无论平板电脑/手机大小如何，图像都会填满容器)。

我的第一个想法是 height: 100% 比较合适，但这只会导致第二个 li 覆盖第一个。

如果我的乱码文本不清楚(很有可能)，您可以在下面的 Codepen 链接中看到我的意图。任何关于确保两个 li 元素保持在一起的指导都将不胜感激。哪怕是说达不到预期的效果!下面还有一张简图。

http://codepen.io/grabeh/pen/uInrk

HTML:

<ul class="photo-list">
  <li>
  <div class="image-holder">
     <img src="http://lorempixel.com/500/500"/>
     <span><a class="flickr-link"></a></span>
     <span class="upvote"></span>
  </div>

</li>
 <li>
    <div class="image-holder">
        <img src="http://lorempixel.com/500/501"/>
        <span><a class="flickr-link"></a></span>
        <span class="upvote"></span>
    </div>
   </li>
</ul>

CSS:

.photo-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.photo-list li {
    margin: 10px 10px 10px 0;
    display:inline-block;
    width: 48%;  
}

.photo-list li:last-of-type {
    margin: 10px 0  10px 0;
}

img {
   border: none;
   width: 100%;
}

.flickr-link {
   background-image: url('http://lorempixel.com/40/40/');
   background-repeat:no-repeat;
   width: 40px;
   height: 40px;
   float: left;
   z-index: 100;
   position: absolute;
}

.image-holder {
     position: relative;
}

.image-holder img {
    position: absolute;
}

.upvote {
    background-image: url('http://lorempixel.com/40/40/');
    background-repeat:no-repeat;
    width: 40px;
    height: 40px;
    float: left;
    z-index: 100;
    position: absolute;
    margin-left: 50px;
}

@media handheld, only screen and (max-width: 750px) {

.photo-list li {
    display: block;
    width: 100%;
    height: 500px;
  }
}

Answer 1

http://jsfiddle.net/xdXv2/

您的主图片不必绝对定位。只有较小的图像才可以，因为它们必须放在它上面。将您的主图像放回文档流中将再次为您的列表项提供高度，这意味着您不再需要为它们提供固定高度。

.flickr-link {
   background-image: url('http://lorempixel.com/40/40/');
   background-repeat:no-repeat;
   width: 40px;
   height: 40px;
   float: left;
   z-index: 100;
    top:0;  /*added this*/
   position: absolute;
}

.image-holder {
     position: relative;
}

.image-holder img {
    /*removed absolute position here*/
}

.upvote {
    background-image: url('http://lorempixel.com/40/40/');
    background-repeat:no-repeat;
    width: 40px;
    height: 40px;
    float: left;
    z-index: 100;
    position: absolute;
    margin-left: 50px;
    top:0;  /*added this*/
}

@media handheld, only screen and (max-width: 750px) {

.photo-list li {
    display: block;
    width: 100%;
    /*removed fixed height here*/
  }
}