100% детей-дивы находятся на разных строках

Question

Я не знаю, почему дивы не на одной линии:

http://jsfiddle.net/LXHfy/

Как я могу добиться этого? Если я использую 40%, то 2 дочерних divs выровняются правильно.

Я не прошу поплавкового решения. Я просто хочу знать, почему это не работает.

Answer 1

Вы должны использовать плавающие div. Добавить:

float: left; 

И остановить плавающий добавить в конце строки пустой DIV со свойством:

clear:both; 

Answer 2

прост:

• ваш родительский DIV является 100px
• дети рядный -Блок (бок о бок)
• дети 50% (50px)

Однако, при использовании встроенного блока, новая строка/пробел вводит «промежуток» между элементами, таким образом, 50px + 50px + «gap» = больше, чем ширина родителя, заставляя ребенка обернуться ниже другого вместо сидя рядом.

, чтобы избежать этого разрыва, не ставьте пробелы:

<parent> 
    <child>foo</child><child>bar</child> 
        ^^^--no gap, whitespace or newline between 

обычно, я делаю это так на список элементов, так что закрытие и открытие не имеет никаких пробелов:

<ul> 
    <li> 
     item 
    </li><li> //close and open immediately, no gaps 
     item 
    </li><li> 
     item 
    </li> 
</ul> 

Answer 3

display: inline-block всегда занимает некоторое расстояние справа. Таким образом, мы можем удалить с font-size:0, word-spacing:1em, letter-spacing:1em туда parent.Write так:

.parent {font-size:0;} 
.child {font-size:15px} 

Проверить это http://jsfiddle.net/LXHfy/6/