Неправильно выстроен встроенный блок

Question

Я не понимаю, почему мои divs с использованием дисплея: встроенный блок не выстраиваются правильно. Они имеют одинаковую высоту, они должны входить в контейнер-контейнер с комнатой для дыхания, но все элементы повсюду.

http://jsfiddle.net/smittles/83jYY/6/

С следующей разметке и CSS:

<div class="content-wrapper"> <a href="#" class="row-link"> 
     <div class="row"> 
      <div class="number-wrapper"> 
       <div class="number">1 
       </div> 
      </div> 
      <div class="text-container"> 
       <div class="title">Santa</div> 
       <div class="desc">Santa is Awesome</div>      
    <div class="host">northpole.com</div> 
      </div> 
      <div class="more-wrapper"> 
       <div class="more"> 
        more about Santa 
       </div> 
      </div> 
     </div><!-- end row --> 
    </a> 
<!-- end block-level row-link --> 

.row { 
    width:960px; 
    margin:3px auto; 
    display:block; 
    height:110px; 
} 
a { 
    text-decoration: none; 
} 
.number-wrapper { 
    display:inline-block; 
    height:100px; 
    width:120px; 
    background: #e8e8e8; 
} 
.number { 
    display:inline; 
} 
.text-container { 
    display:inline-block; 
    width:600px; 
    height:100px; 
    background: #9c9c9c; 
} 
.more-wrapper { 
    display:inline-block; 
    height:100px; 
    width:150px; 
    background: #000; 
} 
.title { 
    font-size:30px; 
    color:red 
} 
.desc { 
    font-size:18px; 
    color:white; 
} 
.host { 
    font-size:10px; 
    color:green; 

} 

Может кто-нибудь сказать мне, почему эти элементы не выстраиваются в прямой ряд?

Answer 1

Для элементов по умолчанию с inline-block имеет значение для вертикального выравнивания, как baseline:

Align базовой линии бокса с базовой линией родительского окна.

Подробнее here. Вы можете изменить его для top или middle:

.number-wrapper { 
    vertical-align:top; 
} 

Демонстрационная http://jsfiddle.net/83jYY/9/

Answer 2

Есть причина, почему вы не хотели бы просто использовать поплавки? Переключите эти divs на display:block и поплавайте их влево, и у вас есть поведение, которое вы ищете.

.number-wrapper { 
    display:block; 
    height:100px; 
    width:120px; 
    background: #e8e8e8; 
    float:left; 
} 
.number { 
    display:inline; 
} 
.text-container { 
    display:block; 
    width:600px; 
    height:100px; 
    background: #9c9c9c; 
    float:left; 
} 

http://jsfiddle.net/83jYY/10/