Inline-блоки не в одном точно точно

Question

У меня есть 3 divs на моей странице, что css: display: inline-block.

.utilitiesContent div 
{ 
    display: inline-block; 
    width:33%; 
} 

Вот fiddle (не обращают внимание, что у него есть кириллические буквы). Как вы видите, это похоже на лестницу, а не ровно в одну строку. Как я могу сделать это с тем же уровнем высоты?

Answer 1

.utilitiesContent div 
{ 
    display: inline-block; 
    width:33%; 
    vertical-align: top; 
} 

вы ищете vertical-align собственности, я сверху, вы можете поиграть и посмотреть, что вам больше нравится.

updated fiddle here

Я настоятельно рекомендую использовать width: 32%;33% просто резки его довольно близко, и можно перейти к следующему ряду в некоторых случаях

Answer 2

Инлайн блок по умолчанию будет поместить пространство между элементами, основанные на размер шрифта. Если вы уменьшите размер шрифта до нуля, вы можете удалить интервал.

.utilitiesContent div 
{ 
    display: inline-block; 
    width:33.33%; 
    font-size:0; 
    vertical-align: top; 
} 

Затем просто установите размер шрифта для элементов внутри элемента встроенного блока.

Смотрите мою скрипку: http://jsfiddle.net/4ear5n8n/6/

Answer 3

.utilitiesContent div 
 
{ 
 
    display: inline-block; 
 
    width:32.5%; 
 
}

<div class="utilitiesContent"> 
 
    <div>div 1</div> 
 
    <div>div 2</div> 
 
    <div>div 2</div> 
 
</div>

DEMO только уменьшает ширину до 0,5% с 33% до 32,5%

.utilitiesContent div 
{ 
    display: inline-block; 
    width:32.5%; 
}