Блок элемент после того, как встроенный блок

Question

У меня есть следующий HTML:

<div id="wrapper"> 
    <div class="inline-block"></div> 
    <div class="inline-block"></div> 
    <div class="inline-block"></div> 
    <div class="block"></div> 
</div> 

Теперь, встроенные элементы имеют display: inline-block. Мне нужно, чтобы вертикальное выравнивание их. Элемент блока - display: block.

Это дает следующий результат (первое изображение):

Так как я хочу розовый элемент (блок), чтобы быть справа, если я пытаюсь установить его float: right, я получаю другие элементы, помещенные влево, оставляют правую границу, соответствующую ширине элемента блока. Любая помощь?

Answer 1

Вы должны обернуть розовый блок в div и установить розовый блок на float:right.

<div id="wrapper"> 
    <div class="inline-block"></div> 
    <div class="inline-block"></div> 
    <div class="inline-block"></div> 
    <div class="wrapper-inner clearfix"> 
     <div class="block" style="float:right"></div> 
    </div> 
</div> 

Если Абер содержание этой внутренней обертки можно добавить класс clearfix - потому что плавающие элементы не дают их родительский элемент высота:

.clearfix:after { 
     content:""; 
     display:table; 
     clear:both; 
    } 

Answer 2

HTML

<div id="wrapper"> 
    <div class="inline-block"></div><!-- remove the whitespace 
--><div class="inline-block"></div><!-- because inline-blocks 
--><div class="inline-block"></div><!-- dont fully collapse whitespace 
--><div class="block"></div> 
</div> 

#wrapper { 
    text-align: right; /* moves inline-blocks to the right */ 
    position: relative; /* to give context for absolute positioning of .block */ 
} 

.inline-block { 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    background: #f40; 
} 

.block { 
    display: block; 
    width: 30px; 
    height: 30px; 
    background: blue; 
    position: absolute; 
    right: 0; /* move the block to the far right of #wrapper */ 
} 

e.g: http://jsbin.com/etuxab/2/edit