缩放浏览器时CSS div的位置被弄乱了

我正在开发一个基于网格图像布局的Facebook应用程序网站。下面的代码对我来说很好，但当我放大浏览器时，一切都会变得一团糟。具有100%缩放视图的浏览器可以正常工作。如果可能，请帮助我查找其他代码或修复以下代码

<style>
div.img {
        margin: 5px;
        padding: 5px;
        border: 1px solid #0000ff;
        height: auto;
        width: auto;
        float: left;
        text-align: center;
    }   

    div.img img {
        display: inline;
        margin: 5px;
        border: 1px solid #ffffff;
    }

    div.img a:hover img {
        border: 1px solid #0000ff;
    }

    div.desc {
      text-align: center;
      font-weight: normal;
      width: 120px;
      margin: 5px;
    }
 </style>

部门经理{
保证金：5px；
填充物：5px；
边框：1px实心#0000ff；
高度：自动；
宽度：自动；
浮动：左；
文本对齐：居中；
}   
部门经理经理经理{
显示：内联；
保证金：5px；
边框：1px实心#ffffff；
}
第a部分：悬停式img{
边框：1px实心#0000ff；
}
分区描述{
文本对齐：居中；
字体大小：正常；
宽度：120px；
保证金：5px；
}

HTML:

在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述

在这种情况下，您必须使用CSS的

calc（）

函数来计算页面调整或缩放时每个图像的正确宽度：

width: calc(24.9% - 22px);

我使用22px的原因是：

2*（margin+border.width+padding）

用于每个图像

当然，使用24.9%而不是25%

---

请参见工作

我更新了Sdghasemi的小提琴。为没有宽度计算功能的旧浏览器添加了回退功能，并将图像宽度设置为100%，稍微清理Html（关闭图像标记等） 图像从容器div流出的原因是HTML中的宽度和高度属性。我现在将其设置为容器的100%。因为边界的原因，意味着100%-2px。图像标题也一样

<div class="img">
    <a target="_blank" href="klematis_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <a target="_blank" href="klematis2_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <a target="_blank" href="klematis3_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <a target="_blank" href="klematis4_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

---

即使在放大一行中的四幅图像后，它看起来也不错，但当你放大换行符时，它每行变为两幅图像。你想让它们做什么，然后让它们变小？如果你想让它们以同样的方式说，你需要一些JavaScript，那么你想要一个代码吗？非常感谢，它帮助了我。但现在我遇到的另一个问题是图像标题已经用完了。任何解决方案？任何小提琴或插图？@Satish Gupta如果答案解决了你的问题，请接受它作为答案！对不起，我是stackoverflow的新手。然而，这个网站在我的编程经验上帮助了我很多。

<div class="img">
    <a target="_blank" href="klematis_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <a target="_blank" href="klematis2_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <a target="_blank" href="klematis3_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <a target="_blank" href="klematis4_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: 24%;
    width: calc(25% - 22px);
    float: left;
    display: block;
    overflow: hidden;
    text-align: center;
    font-size: 100%;
}   

div.img a:hover img {
    border: 1px solid #0000ff;
}

div.img img{
    width: 99%;
    width: calc(100% - 2px);
    border: 1px solid #fff;
}

div.desc {
  text-align: center;
  font-weight: normal;
  width: 100%;
  width: calc(100% - 10px);
  margin: 5px;
}