0

我不完全确定我所追求的是否可行，但目前我有一个无序列表，在桌面模式下将使用 display: inline-block 水平显示两个图像。但是，在平板/纵向模式下，显示切换到块，以使无序列表以通常的方式垂直显示。

不管多么复杂，我有两个小的背景图像，我想覆盖在每个主图像上。我已经使用绝对定位来实现这一点，但是当切换到纵向形式（宽度 < 750 像素）时，第二个主图像覆盖在第一个主图像上。据推测，这主要是由于远离显示：inline-block 以及分别对主背景图像和小背景图像继续使用相对/绝对定位。

我已经通过给每个 li 元素一个特定的高度（500px）来解决这个问题，但是目的是两个 lis 粘在一起，当使用固定高度时，最终会出现间隙（由于每个 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;
  }
}

示例粗略图

4

1 回答 1

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*/
  }
}
于 2013-11-08T16:36:56.197 回答