Question

我不完全确定我之后的可能性，但目前我在桌面模式下使用display：inline-block来水平显示两个图像时，我有一个无序列表。但是，在平板电脑/纵向模式下，显示屏将切换为阻止，以便以通常的方式垂直显示无序列表。

然而，事情变得复杂，我有两个小背景图像，我想覆盖每个主要图像。我已经使用绝对定位来实现这一点，但是当切换到纵向形式（宽度<750px）时，第二主图像覆盖在第一主图像上。据推测，这主要是由于远离显示：内联块和分别继续使用主背景图像和小背景图像的相对/绝对定位。

我已经通过给每个li元素赋予特定高度（500px）来解决这个问题，但是意图是两个lis粘在一起，当使用固定高度时最终会出现间隙（由于每个li有一个宽度为100％（因此无论平板电脑/手机大小如何，图像都会填满容器））。

我的第一个想法是高度：100％是合适的，但这只会导致第二个李覆盖第一个。

如果我的乱码文字不清楚（极有可能），你可以在下面的Codepen链接中看到我的意图。将非常感激地收到关于确保两个元素保持在一起的任何指导。即使是说不可能达到预期的效果！还有一个简短的图表。

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;
  }
}

Rough diagram of example

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*/
  }
}

问题混合位置：绝对与响应式布局

1 个答案: