位置絕對並排CSS

我面對關於這樣的圖像佈置氣球的問題：位置絕對並排CSS

enter image description here

<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/

來源

2014-11-25 Roger

可以使用負利潤率達到這樣的效果：'.r_over {保證金左：-10px; }' – pawel 2014-11-25 09:49:43

你幾乎接近自己解決它。

與位置播放是一個好方法，但對於這個解決方案，您只只需要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>

來源

2014-11-25 09:52:19 ummahusla

謝謝，回答 – Roger 2014-11-25 10:15:14

不用擔心，祝你好運！此外，還可以加上'.r_over：第一胎{保證金左：0};'。這將有助於不樣式的第一張圖像。 – ummahusla 2014-11-25 10:25:30

使用

DEMO

CSS

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

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

來源

2014-11-25 09:51:31

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

來源

2014-11-25 10:01:38 BobyCode

負利潤率會做到這一點最簡單的方法。但是，請確保您使用: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>

來源

2014-11-25 10:09:06 Abhitalks

位置絕對並排CSS

回答

相關問題