Макет прерывается, когда блок расширяется за счет увеличения его заполнения и применения отрицательного поля

Сложно описать словами, поэтому вот jsFiddle, показывающий это.

При наведении курсора на один из зеленых блоков я хотел, чтобы его фон расширился настолько, чтобы «касаться» смежных прямоугольников (перекрывая их поля). Однако при наведении курсора на последний блок каждой строки макет сходит с ума: в строке ниже отображается только один элемент и т. Д.

Причина, кажется, проистекает из отрицательной границы; поскольку, если поле для «расширенного» класса установлено равным 0 вместо -5, этой проблемы не возникает. Но, конечно, это оставит пространство между блоками.

Размер родительского контейнера, похоже, не меняет этого. Обратите внимание, что на данный момент меня не особо беспокоит тот факт, что расширенный блок плохо центрирован и заставляет другие в его строке немного качаться, хотя это может быть связано с проблемой.


person willf    schedule 19.07.2012    source источник


Ответы (3)


Измените отступ расширенного на 10 пикселей http://jsfiddle.net/TMXLz/4/

person Gijs    schedule 19.07.2012
comment
Превосходно. Так что это было больше похоже на то, что я не знаю, как считать проблемы с моей стороны ... ой. - person willf; 19.07.2012
comment
:) со всеми случается, рад помочь - person Gijs; 20.07.2012

Единственный способ, которым я могу сделать то, что вы хотите, - это позиционировать каждый из этих блоков абсолютно (position: absolute) в том месте, где вы хотите. Основная проблема здесь в том, что изменения, которые вы хотите внести в коробку, заставят их посягать на пространство друг друга. Таким образом, вам либо нужно настраивать все их интервалы (используя js) при каждом наведении курсора мыши (что отстой). Или полностью разместите элементы на месте (определенный стиль позиционирования для каждого поля), тогда у вас не будет проблем с их частичным перекрытием. Просто не забудьте увеличить z-index активных, чтобы он всегда был выше остальных.

person Waterboy    schedule 19.07.2012
comment
@Gijs определенно проще, но лично я никогда не был поклонником отрицательной маржи. - person Waterboy; 20.07.2012

Это может быть результат, который вы ищете

http://jsfiddle.net/TMXLz/5/

person Gunjan Kothari    schedule 19.07.2012