Launder

Если в Вашем варианте убрать марджин и поставить обтекание, то, пожалуй, получится, посимпатичнее...

Вот Вам ещё вариантик...

Вот Вам ещё вариантик, основанный на довольно-таки занимательной конструкции: .right { float: right; margin-right: -100%; width: 100%; }

@volshebnyi, конечно можно, transition работает с visibility: hidden в паре с opacity: 0, и, соответственно, visibility: visible и opacity: 1 для видимости. Если использовать только opacity, то "включаться" будет и тогда, когда наведёшь мышкой на "пустое" пространство из которого "выплывает" меню. Вот пример, и ещё один.

@Melodyn, ну тогда, получается, в проблемах вёрстки? Обсуждение работ - это сайт, я так понимаю. А тут именно обсуждение технических моментов...

Присоединяюсь! Спасибо Вам большое, за то, что находите время делиться своим богатым опытом! Успехов, красивых решений интересных задач и процветания!

И, кстати, @Melodyn, а почему Вы тему разместили в обсуждение работ, а не в "Библиотеку полезных приёмов и решений"?

Впрочем, и флексбоксы можно приручить. Складываем равноудалённые квадраты в область, фиксированный отступ по горизонтали, резиновый по вертикали. Можно и полностью резиновый вариант. Но нужно учитывать что, если общая ширина отступов больше одного квадрата, то флексбокс радостно уместит ещё один квадрат в первый ряд. В общем, без скриптов тут сложно обойтись. Исходная же задача отлично решается и без скриптов, через padding-top.

А почему Вы vertical-align не используете или обнуление шрифта у родителя? Ведь явно же расстояние между рядками вертикальное больше чем остальные отступы...

Ещё более причёсанная версия. Можно поставить и более амбициозную задачу: резиновый прямоугольник, чтоб в нём располагались резиновые прямоугольники на равноудалённом расстоянии между друг друга и границ. Частный случай для квадратов в два ряда я решил. Но в общем виде сложно представить как это можно решить без программирования. С помощью программирование решение не сложное: для квадратов: ширина содержащего бокса(.element-to-stretch) принимается за 100%. паддинг бокса +%. Итого получится больше 100%. Каждый квадрат равен 100% поделённый на количество квадратов, минус марджин, равный паддингу бокса. Итого для каждого квадрата действует двойной паддинг свой и соседнего квадрата, если же сторона квадрата "смотрит" на границу содержащего бокса, то марджин квадрата суммируется с паддингом бокса (который мы назначаем равным марджину квадрата), итого получается тот же двойной марджин квадрата, отступы равны. Высота: в случае квадрата у нас высота равна ширине, если речь идёт о прямоугольнике, то просчитать высоту не составит труда при любом алгоритме расчёта, скорее всего это будет 100 умноженный на какой-то коэффициент. Нам нужно количество рядов, как их посчитать без программирования я плохо себе представляю. кстати, считать также нужно и количество квадратов в последнем ряду, алгоритм отступов для них будет наиболее сложным. Итак мы знаем количество рядов. суммарное высота отступов равна 100% минус высота квадрата, умноженная количество рядов. + ещё нужно назначить вертикальные паддинги с двух сторон равные половине высоты отступа между квадратами. Напомню, для соседних квадратов действует двойной марджин, а для крайних квадратов нужен внешний паддинг, чтоб визуально расстояние до края бокса была равно расстоянию между квадратами. Итак у нас есть значение 100% - (высота квадратов х количество рядов). Указанное значение нужно разделить на количество рядов, а потом ещё на два - поскольку у каждого квадрата два отступа сверху и снизу. Назначаем полученное значение вертикальному марджину квадрата и вертикальному паддингу бокса. Для последнего ряда алгоритм тот же что и для высоты, но возникает дополнительная сложность - мы не можем назначить горизонтальный паддинг бокса так, чтоб это не повлияло на соседние ряды. Значит нужно будет иметь дело только с горизонтальными марджинами последнего ряда. Кстати как выделить последний ряд с помощью CSS тоже плохо себе представляю, есть псевдокласс :first-line, а вот псевдокласса :last-line или nth-of-line или, например, nth-last-of-line (которому можно было бы задать единичку), к сожалению, я не нашёл. Впрочем, надеюсь, с помощью скриптов, эта проблема решается... Ну так вот, для последнего ряда мы имеем дело с тем паддингом бокса, который мы проставили в предыдущих рядах. Соответственно отнимаем от 100% общую ширину квадаратов (ширину квадратов на количество квадратов). Добавляем к полученному значению величину наших паддигов бокса, то есть горизонтальный паддинг бокса умноженный на два (у него же с двух сторон паддинг по ширине, справа и слева). Получаем общую ширину отступов. Делим получившееся значение на (количество рядов + 1) получаем расстояние между квадратами. То, что отступов на один больше, чем количество квадратов, вполне очевидно, достаточно себе представить квадраты в ряду и отступы, один отступ будет с двух сторон :-) Расстояние между квадратами делим на два, получаем марджин квадратов. Теперь нас интересует левый марджин самого левого квадрата и правый марджин самого правого - поскольку с крайней стороны у них нет квадрата с таким же марджином, нужно их марджин увеличить на столько же, насколько паддинг бокса меньше. У нас есть расстояние между квадратами. Отнимем от него паддинг бокса и получим значение искомых марджинов. Присвоим полученное значение крайним квадратам последнего ряда (наверное, как-то через присвоение классов) и получим ровненький последний рядок, вместе со всеми остальными! Вуа-ля, решение готово! Кстати, если последний ряд полностью заполнен, то есть, не отличается от предыдущих, то вертикальные и горизонтальные марджины квадратов и паддинги боксов можно поменять местами - визуально квадраты расположатся вертикально. Поскольку пример именно такой, то на это можно посмотреть, поменяв местами значения паддингов на 15-ой строчке и значения марджинов на 20-ой. Обращу внимание, на решение на флэксбоксах. Поскольку флэксбокс, это модуль, с некоторыми ЗАДАННЫМИ алгоритмами, то как удвоить крайние отступы, откуда брать значения для марджинов-паддингов мне не понятно. Если у кого-то есть идеи, как сделать всё красиво с помощью флексбоксов, с интересом послушаю... Возвращаясь к исходному примеру, стоит отметить один его существенный недостаток. Мне пришлось обнулить исходный шрифт содержащего бокса, поскольку при больших размеров шрифтов дочерних элементов не удаётся скомпенсировать горизонтальные отступы шрифта. Ни обнуление word-spacing, ни letter-spacing результата не дают. Можно, конечно, действовать в ещё более "ручном" режиме, но это уже не интересно. В общем, обнуление шрифта и последующее восстановление размера для дочернего элемента, при overflow в значении hidden или auto, не даёт "внутренним" шрифтам влиять на расстояние между квадратами. Отмечу что вертикальные отступы удалось решить с помощью vertical-align, который можно, например, поставить в значении middle или bottom, скажем, в последнем случае вертикальный отступ добавится, вероятно, только если высота шрифтовой площадки превысит размеры квадрата, что малореально для содержательной надписи - даже если на квадрате написана одна буква, размер её шрифтовой площадки врят ли превысит размер квадрата. Впрочем, если стоит цель заполнить буквой всё пространство квадрата (или прямоугольника), то нужно, видимо, использовать другие средства... Для вертикального, как и горизонтального отступа, как я уже говорил, работает решение через обнуление размера шрифта для родителя, с последующим восстановлением размера для потомка, чем же это решение плохо? Плохо тем, что если в документе размер шрифта относителен и для потомков назначается через em, то шрифтовая раскладка потеряется. Но как скомпенисировать горизонатальные отступы между элементами я, к сожалению, не знаю. Поэтому буду рад, если кто-нибудь предложит более гибкое решение...

А где малиновый прямоугольник в Вашем примере?

Чуть более причёсанные решения: раз, два и три. Первый вариант работает только с overflow: hidden, второй и третий, может, также принимать значения и auto. Люди, а подскажите, как flex-контейнер сделать квадратным?...

Ну и вариант Игоря работает, элементы ровненько заполняются рядами. Тут дело не в межстрочном интервале, а в вертикальном выравнивании.

Ну так я же привёл пример, чтоб она не вызывала :-) Ну вот в самом первом приближении раз и два.

Поиграйтесь размером шрифта, 7я строчка...

Ну, в случае, когда Вы используете margin-bottom, то при изменении размера шрифта, меняется размер вертикальных расстояний между блоками.

Как это врят ли? Я специально поставил размер шрифта большой. Уберите в моём примере вертикальное выравнивание, и поставьте марджин-боттом, как Вы и говорили, и, увидите, что зависит.

Тогда, похоже, решение будет зависеть от размера шрифта. Лучше, например, так...

В смысле height: auto разумеется... А поскольку оно по-умолчанию auto, то его можно просто убрать.

Отлично! С этими двумя правками: width: auto для контент и margin-bottom для div всё работает, в соответствии с тем что Вы написали в первом сообщении. Спасибо!

Да, вижу, ок. Почему - я вижу. А можно вообще сделать так, чтоб контейнер был не фиксированным, а растягивался по высоте?

Отступы от краёв меньше отступов между элементов. Растягиваю/сужаю окно - квадраты превращаются в вытянутые или растянутые прямоугольники.

У меня получилось как-то так...

Вот Вам рыба. Экспериментируйте.

Угу... В комментариях, люди, также, в основном, сожалеют... Вот, например, на мой взгляд, показательно, хотя, возможно, и достаточно субъективно... И, потом, возвращаясь к теме топика, уж кому-кому, а Мозиле, встроенные возможности своего броузера добавить, думаю, не сложно.