Положение Absolute Бок о Бок 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;} 

Fiddle ссылка 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

использования

DEMO

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; в .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>