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

Хочу 2 дива шириной 50% в одной строке или 4 по 25% (смысл чтобы заполняли все 100%) через display: inline-block, но последний див переносится.
Делаю ширину 49% (24% и тп) и становится почти нормально. отступов никаких нет.
Подскажичет почему так происходит и как такое сделать?
  • Вопрос задан
  • 10633 просмотра
Решения вопроса 3
@bogomazov_vadim
Прочитай это и все поймешь.
Ответ написан
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
дело в том, что display: inline-block; добавляет после каждого такого блока пробел 3-4px (в зависимости от браузера).
есть 2 решения:
  1. использовать правило margin-right: -3px - этот отрицательный отступ компенсирует те 3 пикселя, которые появляются. НО! В разных масштабах и в разных браузерах изначальный отступ в 3px может выглядеть шире/уже на пару пикселей и в итоге получим либо наезды блоков друг на друга, либо тот же самый перенос
  2. этот способ наиболее удобный. просто между блоками удалить все пробелы и переносы строк. т.е. закончился предыдущий div, и сразу же после закрывающего тега нужно вставлять следующий открывающий.


правильно: </div><div> - в этом случае отступов не будет
не правильно: </div> <div> - даже один символ отступа или переноса строки нарушит "хрупкое равновесие"
Ответ написан
kn1ght_t
@kn1ght_t
потому что в html коде между дивами пробелы или энтеры стоят
можно сделать, например, так: jsfiddle.net/wkb92p8d то есть закомментить пропуски между дивами
либо у родителя задать размер шрифта нулю jsfiddle.net/wkb92p8d/1 но этот вариант не работает в сафари под виндоус, например
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@KurochkinIvan
Когда я не знал про пробелы после div'ов, о чём сообщил Александр Цымбал, я просто использовал float:left/right для обоих блоков (если их два). Это тоже рабочий способ.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
PiRL Ventures Санкт-Петербург
от 80 000 до 100 000 ₽
Модимио Кострома
от 120 000 ₽
NUTSon Москва
от 100 000 ₽
12 апр. 2021, в 02:45
500 руб./за проект
12 апр. 2021, в 02:02
800 руб./за проект