Question

当我放大，缩小我的网页时，所有div和项目的位置都会受到干扰。当我再次将缩放重置为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

这是因为您提供了浮动元素的绝对宽度。如果更改屏幕大小，则元素似乎未排序，因为它们仍然具有指定的大小。也许百分比大小定义可以帮助您解决这个问题。

Answer 2

放大和缩小在不同的浏览器上意味着不同的东西。例如，在FF上，您可以放大“仅文本”。当缩放功能影响文本大小时，绝对位置div会像你看到的那样混乱。

您可以通过将页面设计为“弹性”来解决此问题。您可以用“em”单位定义坐标和测量值，而不是使用像素。 em等于浏览器的默认文本大小，通常为16px。为了让生活更轻松，请将以下内容放在样式表中，将em重置为10px：

body {
font-size: 62.5%;
}

如果上面的代码在您的样式表中，您可以通过将每个像素值除以10来轻松地将像素转换为em。例如，使用上面的代码：

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

这应解决缩放问题，并允许用户在查看页面时更改文字大小。这对你的精灵不起作用，你可能仍会遇到重叠的问题。如果它变得混乱，您可能必须考虑改变您的布局方法。如果您确实遇到重叠，我建议您在所有div上使用overflow:hidden并在适当的时候指定max-height和max-width。

如果你需要阅读更多关于ems和弹性设计的内容，这里有一个很好的教程：http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

这是关于max-height的W3参考： http://www.w3schools.com/Css/pr_dim_max-height.asp

我怎样才能在html中修复div的位置？

2 个答案: