Как сделать 2 div display: inline-block; width: 50%?

Question

[Сергей]

Хочу 2 дива шириной 50% в одной строке или 4 по 25% (смысл чтобы заполняли все 100%) через display: inline-block, но последний див переносится.
Делаю ширину 49% (24% и тп) и становится почти нормально. отступов никаких нет.
Подскажичет почему так происходит и как такое сделать?

Answer 1

[Vadim Bogomazov]

Прочитай это и все поймешь.

Comments

[Сергей]

Сергей: там читать много. это не походит. нужен быстрый и понятный ответ

[Сергей]

Сергей: Убедили, спасибо)

Answer 2

[Александр Цымбал]

дело в том, что display: inline-block; добавляет после каждого такого блока пробел 3-4px (в зависимости от браузера).
есть 2 решения:

1. использовать правило margin-right: -3px - этот отрицательный отступ компенсирует те 3 пикселя, которые появляются. НО! В разных масштабах и в разных браузерах изначальный отступ в 3px может выглядеть шире/уже на пару пикселей и в итоге получим либо наезды блоков друг на друга, либо тот же самый перенос
   
2. этот способ наиболее удобный. просто между блоками удалить все пробелы и переносы строк. т.е. закончился предыдущий div, и сразу же после закрывающего тега нужно вставлять следующий открывающий.
   

правильно: </div><div> - в этом случае отступов не будет
не правильно: </div> <div> - даже один символ отступа или переноса строки нарушит "хрупкое равновесие"

Comments

[Алексей Уколов]

inline-block ничего никуда не добавляет.

[Александр Цымбал]

Алексей Уколов: уфффф, давай начни придираться к формулировкам. я знаю, что делает inline-block, просто пишу простыми словами, чтобы ламеры, которые здесь сидят, понимали быстро.

[Сергей]

Спасибо за ответ. Приму это к сведению.

[Алексей Уколов]

Александр Цымбал: во-первых, мы с вами на брудершафт не пили, а во-вторых, именно при общении с "ламерами", как вы их называете, и нужно использовать корректные формулировки. Опытные люди могут понять, где вы упростили, а вот новички - нет.

[Сергей]

Алексей Уколов: Александр Цымбал: Господа, давайте не будем разводить срач

[Алексей Уколов]

Сергей: если в ответе, который к тому же принят как решение, содержится ошибка, мое право и обязанность на нее указать.

Answer 3

[kn1ght_t]

потому что в html коде между дивами пробелы или энтеры стоят
можно сделать, например, так: jsfiddle.net/wkb92p8d то есть закомментить пропуски между дивами
либо у родителя задать размер шрифта нулю jsfiddle.net/wkb92p8d/1 но этот вариант не работает в сафари под виндоус, например

Answer 4

[KurochkinIvan]

Когда я не знал про пробелы после div'ов, о чём сообщил Александр Цымбал, я просто использовал float:left/right для обоих блоков (если их два). Это тоже рабочий способ.

Comments

[Сергей]

float:left/right - достаточно старый способ и не не подходит для многих задач. Например когда у тебя не 2, а 4 блока и их нужно еще адаптивными сделать