
Новые сообщения [новые:0]
Дайджест
Горячие темы
Избранное [новые:0]
Форумы
Пользователи
Статистика
Статистика нагрузки
Мод. лог
Поиск
|
|
06.06.2013, 23:12
|
|||
|---|---|---|---|
|
|||
30% + 50% + 20% != 100% Почему так?! |
|||
|
#18+
Здравствуйте. Есть div, внутри которого есть еще три блока с display: inline-block; с горизонтальными размерами 30%, 50%, 20%. Почему третий блок всегда переносится на другую строку? Конечно если сделать один из блоков на 1% меньше, что все выстраивается, но хотелось бы знать почему 30% + 50% + 20% != 100%? Еще интересует что это за отступы между блоками рисуют браузеры и как (и можно ли) их убрать? Пример обсуждаемого кода: http://jsfiddle.net/5Rf9N/ ... |
|||
|
:
Нравится:
Не нравится:
|
|||
|
|
|
06.06.2013, 23:21
|
|||
|---|---|---|---|
30% + 50% + 20% != 100% Почему так?! |
|||
|
#18+
а попробуйте так Код: html 1. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
|
|
|
06.06.2013, 23:46
|
|||
|---|---|---|---|
|
|||
30% + 50% + 20% != 100% Почему так?! |
|||
|
#18+
Паганель, Помогло. Но теперь я еще в большем замешательстве! Получается код форматировать нельзя (хотя в браузере по ф12 он все равно отформатированный показывается)?! Не могли бы Вы подсказать рекомендаций, или как бы это правильнее сказать, допустимых случаев, подводных камней форматирования html кода? Почему в моем примере, да и в общем случае, переносы так влияют на отображение? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
|
|
|
07.06.2013, 04:23
|
|||
|---|---|---|---|
30% + 50% + 20% != 100% Почему так?! |
|||
|
#18+
Как вариант, источники рекомендуют у родительского контейнера таких блоков указывать шрифт размером 0, а в самих блоках - требуемый. Шрифт в 0 пикселей сделает отступы размером 0 пикселей. Либо флоаты, либо инлайн-блоки. Но у каждого из способов есть свои определенные минусы. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
|
|
|
07.06.2013, 07:45
|
|||
|---|---|---|---|
|
|||
30% + 50% + 20% != 100% Почему так?! |
|||
|
#18+
IDVsbruckКак вариант, источники рекомендуют... Тоже рабочий вариант, но в этом случае пропадает наследование размера шрифта, что может быть очень неудобно. Не могли бы Вы подсказать эти источники? Думаю должен существовать в природе букварь, в котором описаны типовые приемы верстки. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
|
|
|
07.06.2013, 08:42
|
|||
|---|---|---|---|
30% + 50% + 20% != 100% Почему так?! |
|||
|
#18+
Lamo2012Почему в моем примере, да и в общем случае, переносы так влияют на отображение? Ты сделал ДИВы строчными элементами. И теперь это просто "слова", пример Код: javascript 1. Для "слитности" нужно просто убрать пробелы Код: javascript 1. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
|
|
|
07.06.2013, 12:59
|
|||
|---|---|---|---|
30% + 50% + 20% != 100% Почему так?! |
|||
|
#18+
Lamo2012IDVsbruckКак вариант, источники рекомендуют... Тоже рабочий вариант, но в этом случае пропадает наследование размера шрифта, что может быть очень неудобно. Не могли бы Вы подсказать эти источники? Думаю должен существовать в природе букварь, в котором описаны типовые приемы верстки. Я просматриваю ежедневно Хабр и мне кажется, что встречал такой обзор именно там, причем, совсем недавно. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
|
|
|
07.06.2013, 16:27
|
|||
|---|---|---|---|
|
|||
30% + 50% + 20% != 100% Почему так?! |
|||
|
#18+
Подскажите, почему вот в этом примере если в разметке <div id="aside"> и <div id="content"> поменять местами, т.е. установить их в том порядке, к котором они выводятся на экране, макет разваливается? Мне кажется потому что <div id="content"> блочный элемент и после него выводится перенос, но установка display: inline-block; только портит картину, а не исправляет, как я ожидал. Почему так? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
|
|
|
07.06.2013, 21:10
|
|||
|---|---|---|---|
30% + 50% + 20% != 100% Почему так?! |
|||
|
#18+
Lamo2012Подскажите, почему вот в этом примере если в разметке <div id="aside"> и <div id="content"> поменять местами, т.е. установить их в том порядке, к котором они выводятся на экране, макет разваливается? Мне кажется потому что <div id="content"> блочный элемент и после него выводится перенос, но установка display: inline-block; только портит картину, а не исправляет, как я ожидал. Почему так? Потому что это как-раз и есть один из спрашиваемых Вами стандартных приёмов вёрстки ) Все три div в данном случае являются блочными... Но... те элементы, у которых выставлен float не занимают полного пространства по ширине, а значит по логике, туда можно разместить последующие элементы (что браузер и делает). А вот последний div с id=content занимает всю ширину, А значит последующие элементы страницы не могут быть помещены рядом с ним, и потому переносятся вниз. По-этому меняя их местами, Вы смещаете правую колонку вниз. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
|
|
|

start [/forum/topic.php?fid=22&mobile=1&tid=1448251]: |
0ms |
get settings: |
4ms |
get forum list: |
12ms |
check forum access: |
2ms |
check topic access: |
2ms |
track hit: |
163ms |
get topic data: |
7ms |
get forum data: |
2ms |
get page messages: |
42ms |
get tp. blocked users: |
1ms |
| others: | 215ms |
| total: | 450ms |

| 0 / 0 |
