絕對位置並排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>