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

时间:2013-11-08 16:16:16

标签: css

我不完全确定我之后的可能性,但目前我在桌面模式下使用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

1 个答案:

答案 0 :(得分: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*/
  }
}