Блог

Посмотрите на это: http://jsfiddle.net/kdcmq/86 /

 #parent {
position: relative;
width: 500px;
height: 500px;
background: red;    
}

#child {
display:inline-block;
width: 100px;
height: 100px;
background: blue;
top: 0;
left: 100%    
}
  

Я хочу сделать так, чтобы меньшие синие элементы начинались при запуске большего, чтобы синие элементы находились прямо под границей родительского div. Возможно ли это?

Заранее благодарю вас!

Используйте свойство vertical-align

 vertical-align:top;
  

http://jsfiddle.net/kdcmq/88/

Вам понадобится position: absolute для #child. Я думаю, вы также хотите, чтобы осталось: 0, а не 100%.

Нет необходимости, чтобы #child был встроенным блоком. Сделайте его блокирующим.

Кстати, это прямой ответ на ваш вопрос. Является ли то, что вы пытаетесь сделать, хорошей практикой, это другой вопрос…

Итак, у вас есть ряд проблем:

1. Вы не можете создать 3 элемента с идентификатором ‘child’, сделайте их классом
2. атрибуты top и left ничего не значат, если position:absolute
3. Вы не можете убрать интервал. Короткий поиск в Google показал бы это: http://css-tricks.com/fighting-the-space-between-inline-block-elements /

Вы также можете перемещать свои элементы

 .child {
float:left;
width: 100px;
height: 100px;
margin:0 10px 0 0;
background: blue;   
}
  

http://jsfiddle.net/AgX62/

(Изменил ваши повторяющиеся идентификаторы на классы)