绝对位置并排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

采用

演示

的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;增加margin-left: -10px; 在.r_over{}但删除.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>