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

start [/forum/topic.php?fid=22&msg=38289445&tid=1448251]: |
0ms |
get settings: |
10ms |
get forum list: |
21ms |
check forum access: |
4ms |
check topic access: |
4ms |
track hit: |
193ms |
get topic data: |
12ms |
get forum data: |
3ms |
get page messages: |
56ms |
get tp. blocked users: |
1ms |
| others: | 250ms |
| total: | 554ms |

| 0 / 0 |
