[英]Position Absolute Side by Side CSS
I am facing issue regarding placing balloons like this image: 我面临有关放置像这样的气球的问题:
<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;}
Fiddle link http://jsfiddle.net/fddkdvn4/ 小提琴链接http://jsfiddle.net/fddkdvn4/
You almost near to solve it by yourself. 您几乎可以自己解决它。
Playing with position is a good approach, but for this solution, you just simply need margin-left: -10px
. 排名是一种很好的方法,但是对于此解决方案,您只需要
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>
Add margin-left: -10px;
margin-left: -10px;
增加margin-left: -10px;
in .r_over{}
but delete postion:relative;
在
.r_over{}
但删除.r_over{}
postion:relative;
and right:29px;
right:29px;
Negative margin would be the simplest way to do this. 负余量将是执行此操作的最简单方法。 But, make sure you use the
:not(:first-child)
selector, otherwise the first image will also get the negative margin. 但是,请确保使用
:not(:first-child)
选择器,否则第一张图像也将获得负边距。
Snippet: 片段:
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.