Как я могу исправить положение div в HTML?

Question

Когда я увеличиваю, уменьшаю мою веб-страницу, положение всех элементов и элементов нарушается. И когда я снова сбрасываю масштабирование до 100%, это нормально. Даже эта проблема возникает, когда открываю ту же страницу на большом экране. Ноутбук. How can I fix the div position. мой код CSS-

/* hbg */
.hbg { 
background-color:transparent;
float:left; 
margin:2px 0 0 45px; 
padding:65px 456px 0 56px; 
width:137px; 
height:190px; 
background:#fff url(images/hbg_img.jpg) no-repeat top left;
}

/*solutions*/
.solu{ background-color:transparent;}
.solu_resize { margin:0 auto; padding:0; width:auto;}
.solu .smenu ul { margin:0 0 0 45px; padding:0; float:left; width:auto; list-         style:none;}
.solu .smenu ul li { margin:0 0; float:left;}
.solu .smenu ul li a { display:block; margin:0; padding:0; color:#5f5f5f; text-    decoration:none;}
.solu_resize img{ float:left; padding:0 0 0 0;}
........

Answer 1

Увеличение и уменьшение означает разные вещи в разных браузерах.Например, на FF, вы можете увеличить «только текст».Когда функция масштабирования влияет на размер текста, элементы div с абсолютными позициями портятся, как вы видели.

Эту проблему можно решить, сделав страницу "эластичной".Вместо использования пикселей вы определяете координаты и измерения в единицах «em».Em равен стандартному размеру текста браузера, который обычно составляет 16px.Чтобы упростить жизнь, сбросьте em до 10px, добавив в таблицу стилей следующее:

body {
font-size: 62.5%;
}

Если приведенный выше код есть в вашей таблице стилей, вы можете легко преобразовать пиксели в em, разделив значение каждого пикселя на10. Например, используя приведенный выше код:

margin:.2em 0 0 4.5em; 
padding:6.5em 45.6em 0 5.6em; 
width:13.7em; 
height:19em;

Это должно решить проблему масштабирования, а также позволить людям изменять размер текста при просмотре вашей страницы.Это не будет работать для ваших спрайтов, и вы все равно можете столкнуться с пересекающимися проблемами.Если это станет грязным, вам, возможно, придется подумать об изменении вашего подхода к макету.Если вы испытываете частичное совпадение, я бы посоветовал вам использовать overflow:hidden на всех ваших делениях и указать max-height и max-width, где это необходимо.

Если вам нужно узнать больше о ems и эластичном дизайне, вотхороший учебник: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

А вот ссылка W3 на максимальную высоту: http://www.w3schools.com/Css/pr_dim_max-height.asp

Answer 2

Это потому, что вы указали абсолютную ширину с плавающими элементами. Если вы измените размер экрана, элементы окажутся несортированными, поскольку они по-прежнему имеют указанный размер. Возможно, определение размера в процентах поможет вам решить эту проблему.