我不完全确定我之后的可能性,但目前我在桌面模式下使用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;
}
}
答案 0 :(得分:1)
您的主图像不一定是绝对定位的。只有较小的图像,因为它们必须坐在它上面。将主图像放回文档流程中将再次为列表项目提供高度,这意味着您不再需要为其指定固定高度。
.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*/
}
}