2011-12-29 4 views
1

Я установил 4 бокса в идеальном расположении, используя абсолютное позиционирование. Я понимаю, что вы в основном устанавливаете местоположение x, y для каждого блока, используя верхний, левый и родительский элементы - это начало. Все работало так, как я ожидал, и я изумился, как сработали хорошие вещи. Чем я ударил кнопку масштабирования в IE 9, и хотя поддерживаемые там координаты y ... х кориданаты сдвигаются влево ... некоторые даже за родительским элементом, который делает еще меньше смысла b.c. Я не указал никаких отрицательных значений. Почему масштабирование влияет на абсолютное позиционирование?Как абсолютное положение набора элементов?

+0

Это не просто масштабирование, вызывающее проблемы. Изменение размера окна браузера также имеет некоторые интересные результаты. –

ответ

0

Есть много способов сделать это правильно ...но то, что я закончил делать, и что делает больше всего для меня, - это установить координатную плоскость x-y и поместить ваши элементы с использованием полей или верхних и левых атрибутов. Для этого я устанавливаю родительский div в относительное позиционирование, чтобы он регистрировался как «происхождение», а затем установил четыре квадратные divs как абсолютные позиции. Это хорошо работает. Что с моей стороны, так это то, что вы должны установить родительский div из вашего абзаца, который позиционирует элементы для нестатического позиционирования.

1

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

Возможна только проверка размера с помощью JavaScript, возможно, это можно распознать с помощью JS, но это будет очень сложно. Во всяком случае, важно, чтобы он работал во время масштабирования?

-1

Не избегайте таблиц, если они находятся в правильном направлении - выравнивание 4 блоков слева направо, сверху вниз, проще всего сделать с таблицей, imho. Вы можете использовать div с поплавком влево и вправо и таким образом, но ячейки в таблице никогда не выходят из выравнивания.

+0

Я согласен с вами в принципе, но в этом случае я не думаю, что таблица нужна. Кроме того, мне повезло больше с 'display: inline-block;' вместо 'float: left;' –

+0

http://www.alistapart.com/articles/journey/ – Wex

1

Ваши абсолютные позиционированные элементы в настоящее время расположены относительно верхнего/левого положения тега <body> (которое всегда равно 0px/0px).

Но у вас есть выровненный по центру макет с margin-left: auto; margin-right: auto;, и вы хотите, чтобы абсолютно позиционированные элементы идеально соответствовали этому.

Скажите, что вы используете масштабирование, чтобы уменьшить страницу на 50%. Это уменьшит свойство позиции left на 50% и уменьшит width элемента margin:auto; на 50% (запуск поля слева и справа будет увеличен тем изменением ширины!).

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

Чтобы сделать его идеальным, вы должны сделать абсолютные позиционированные элементы относительно элемента с помощью margin-left: auto;.

В вашем конкретном примере, я хотел бы сделать это:

div#Ab1 
{ 
    position: relative; 
} 

div#Ab1_2 
{ 
    position: absolute; 
    top: 80px; 
    right: 0px; /* note: setting a right position, not a left position */ 
} 

/* and do the same for div#Ab1_4 and div#Ab1_4_under */ 

Имеет ли это смысл?

PS: причина, по которой она работала локально, а затем была сломана при загрузке, вероятно, вы не просматривали страницу с уровнем масштабирования по умолчанию на одном из них.

1

Если 4 блока одинаковы по высоте и ширине, вы можете сделать это:

div.block { height: 200px; width: 400px; float: left; } 

Затем поместите их в контейнер, который позволяет два блока бок только бок.

Пример Fiddle: http://jsfiddle.net/u5xVa/

Смежные вопросы