定位绝对并排CSS

Question

我正面临着关于像这张图片一样放置气球的问题：

    <div class="red_frame">
    <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
    <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
        <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
        <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
        <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
        <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
        <img src="http://i.stack.imgur.com/54SMF.png"  class="r_over"/>
    </div>
.red_frame {
float: left;
width: 143px;
height: 346px;
margin: 0 2px 0 0;
position: relative;
}

.r_over
{position: relative;
right: 29px;}

小提琴链接 http://jsfiddle.net/fddkdvn4/

Answer 1

你几乎要亲自解决。

使用位置是一种很好的方法，但对于此解决方案，您只需要margin-left: -10px。

.red_frame {
  float: left;
  width: 143px;
  height: 346px;
  margin: 0 2px 0 0;
  position: relative;
}
.r_over {
  position: relative;
  right: 29px;
  margin-left: -10px;
}

<div class="red_frame">
  <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
  <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
  <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
  <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
  <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
  <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
  <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
</div>

Answer 2

使用

DEMO

<强> CSS

.red_frame {
float: left;
width: 143px;
height: 346px;
margin: 0 2px 0 0;
position: absolute;
}

.r_over
{margin-left:-10px;
}

Answer 3

在margin-left: -10px;中添加.r_over{}，但删除postion:relative;和right:29px;

Answer 4

负边距是最简单的方法。但是，请确保使用:not(:first-child)选择器，否则第一张图片也会获得负边距。

<强> 段：

.red_frame {
    width: 143px; height: 346px; margin: 8px;
}
.r_over:not(:first-child) {
    margin-left: -10px;
}

<div class="red_frame">
    <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
    <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
    <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
    <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
    <img src="http://i.stack.imgur.com/54SMF.png" class="r_over" />
</div>