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

回答

相关问题