Задать вопрос
sabramovskikh
@sabramovskikh
html

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

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


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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Услуги devops разного характера для видео сервиса
26 апр. 2024, в 06:46
1000 руб./в час
Найти ошибку flutter_map
26 апр. 2024, в 05:31
1000 руб./за проект
Разработать электронику для весов с Wi-Fi
26 апр. 2024, в 01:22
1000 руб./в час
Ещё заказы