Проблема с делением

Question

Я пытаюсь разместить DIV.У меня есть пять DIV шириной 30 пикселей, и я хочу поместить их в другой DIV шириной 150 пикселей.Звучит просто, но я считаю, что пять DIV не подходят.

5 * 30 = 150 (но для их встраивания требуется внешний делитель размером 166 пикселей)

У меня есть скрипка

<div class="A">
    <div class="B" >a</div>
    <div class="B" >b</div>
    <div class="B" >c</div>
    <div class="B" >d</div>        
    <div class="B" >e</div>
    <div class="B" >f</div>
</div>

div.A { background-color: Red; width: 150px;}
div.B { display: inline-block; height: 20px; width: 30px;}

Есть ли что-то, что мне не хватает?Я не могу понять, почему браузеры располагаются так, как они.

Answer 1

Когда вы превращаете div в встроенные элементы, в игру вступает и другой встроенный контент, то есть пробел между элементами.Вы получаете пробел между каждым div, который занимает еще несколько пикселей.

Если вы удалите пробел между div, между ними не будет пробелов, и пять элементов поместятся в 150 пикселей:

http://jsfiddle.net/SLq6z/1/

Answer 2

Очень похоже на следующее: Дисплей: дополнительное поле для встроенного блока

Answer 3

Используйте свойство float:left для ваших классов A и B;).

Answer 4

Можете ли вы заменить display:inline-block на float:left, не вызывая других проблем? это решает вашу текущую проблему ...

div.B { float:left; height: 20px; width: 30px;}