Question

<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的宽度，图像会正确显示在彼此旁边。

如何强制元素始终显示在彼此旁边，在空间有限的情况下，相比重叠而不是在下面绘制？

Answer 1

您可以使用显示表/表格单元格旁边显示。像：

div{
    display:table;
}
a{
    display:table-cell;
}

从锚标记中删除float:left。

检查Fiddle Here.

Answer 2

如果我理解正确，您希望图像彼此相邻显示，并且当有更多图像时，您希望它们水平重叠以适合给定的空间。

使用javascript来完成你想要的。整体逻辑是，

获取div的最大宽度
将宽度除以您拥有的图像数量（如果所有图像的宽度相同），则表示该值为imgPosVal。
放置图像的方式是在迭代时为每个图像增加imgPosVal。
要成功完成此项工作，您必须position; {/ 1}}图像
希望这会有所帮助。如果你没有得到它，请告诉我。

示例代码：（您可能需要根据您的要求进行一些调整） var allImagesWidth = 100; placeImages（[＆＃34; image1.png＆＃34;，＆＃34; image2.png＆＃34;，＆＃34; image3.png＆＃34;]）;
```
absolute
```

Answer 3

使用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>

<强> Jsfiddle Demo

<强> Flex Guide

Answer 4

您可以使用 postion：absolute 属性以及 z-index：199 来保持其他人的优势。 z-index的最大值代表顶部位置。

  <a style="position:absolute;z-index : 0;cursor: pointer; text-decoration: underline; padding: 0px 3px 0px 0px; float: left;">
    <img src='myimage.png' />   </a>

  <a style="position:absolute;z-index : 1;margin-left: 4px; padding: 0px 3px 0px 0px; float: left;" >
    <img src='myimage2.png' />   </a>

强制相同div中的图像重叠

4 个答案: