Ответственные столбцы не складываются ..?

Question

Я создаю столбцы, основанные на процентах. Например, у меня есть два столбца 50%. Они должны составлять до 100% и соответствовать одному и тому же ряду.

.col_half { width: 50%; display:inline-block; }

Однако, с этим во второй колонке проталкивается к следующей строке по некоторым причинам. Если я уменьшу ширину до 49,5%, то два столбца совпадут.

Та же проблема с тремя столбцами, если я установил ее на 33,3%, последний столбец переместится. Если я уменьшу его до 32,8%, все они подходят. В обоих случаях есть небольшой пробел на правой стороне ширины, так как они не составляют ровно до 100%.

Эти столбцы все в ряд с шириной, установленной на 100%. Мне интересно, что может быть причиной этой проблемы? Я использую Bootstrap, что может повлиять на него ..?

Answer 1

Если два элемента разделения или другие элементы уровня блока имеют 50% width и float, они будут отображаться рядом друг с другом. Если у вас нет float, добавьте float: left; к обоим элементам. Если для обоих элементов заданы float: left; и width: 50%;, то дочерний контент переполняется. Используйте инспектор DOM Firebug, чтобы начать удаление дочерних элементов из этих родительских элементов до тех пор, пока макет не будет исправлен, и тогда вы узнаете, куда двигаться, чтобы исправить ситуацию.

Answer 2

Когда два (или более) соответствующих элемента имеют position: inline-block, все пробелы между их символами окончания/начала влияют на пространство между ними в HTML. Единственный способ избежать этого, чтобы удалить все белые-пространства между этими элементами еще в текстовом редакторе, например:

<div> 
    blah blah 
</div><div> 
    blah2 blah2 
</div> 

вместо этого

<div> 
    blah blah 
</div><!-- Here is white-space (new line) --> 
<div> 
    blah2 blah2 
</div>