强制同一div中的图像重叠
强制同一div中的图像重叠
提问于 2015-05-15 16:48:48
<div style='width:10px'>
<a style="z-index : 1;cursor: pointer; text-decoration: underline; padding: 0px 3px 0px 0px; float: left;">
<img src='myimage.png' />
</a>
<a style="z-index : 1;margin-left: 4px; padding: 0px 3px 0px 0px; float: left;" >
<img src='myimage2.png' />
</a>
</div>http://jsfiddle.net/n5q06r59/
使用此代码，这两个图像将显示在彼此的下方。如果我增加主div的宽度，图像会正确地并排显示。
在空间有限的情况下，如何强制元素始终显示在彼此的旁边，而不是重叠而不是绘制在下面？
回答 4
Stack Overflow用户
发布于 2015-05-15 16:55:05
你可以使用display table/table-cell来显示在旁边。像这样：
div{
display:table;
}
a{
display:table-cell;
}并从锚标签中删除float:left。
检查Fiddle Here.
Stack Overflow用户
发布于 2015-05-15 16:53:58
如果我理解正确的话，您希望图像彼此相邻显示，当有更多图像时，您希望它们水平重叠以适合给定的空间。
使用javascript来实现您想要的功能。总体逻辑是，
获取absolute;的最大宽度
- 除以您拥有的图像数量(如果所有图像都具有相同的宽度)，假设该值为
imgPosVal.
- Place图像的方式，即您在迭代中为每个图像递增
absolute；
。position imgPosVal要使此工作成功，您必须以absolute；的身份positionimgPosVal
希望这能有所帮助。如果你不明白，请告诉我。
示例代码：(您可能需要根据您的需求进行一些调整) var allImagesWidth = 100；placeImages("image1.png"，"image2.png"，"image3.png")；
function placeImages(imageList) {
var parentDiv = $("#div");
var parentDivWidth = parentDiv.width(); //Say this is 200.
var imgPosVal = parentDivWidth/imageList.length; //66.6
for(var i=0; i<imageList.length; i++) {
var imgObj = $("<img src=\""+imageList[i]+"\" >");
parentDiv.append(imgObj);
imgObj.css({"position":"absolute", "left": (imgPosVal*i) + "px"});
}
}Stack Overflow用户
发布于 2015-05-15 17:11:55
使用Flexbox的解决方案
.main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}
a {
width: calc(100% - 4px);
margin: 0px 2px;
}
img {
width: 100%;
}<div class="main">
<a><img src='http://lorempixel.com/400/200/sports/1/' /></a>
<a><img src='http://lorempixel.com/400/200/sports/2/' /></a>
<a><img src='http://lorempixel.com/400/200/sports/3/' /></a>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30255250
复制相关文章
相似问题
腾讯云开发者
