Html 使用百分比在div中均匀地隔开图像

我需要在一行中水平对齐四个图像。我知道这已经被问了很多次了，但是我发现没有一个解决方案对我有效。它们似乎都依赖于行的固定宽度或图像的固定宽度。我需要以百分比的形式说明这两种情况

我的Html：

<div id="tabBar">

                <div id="PDiv">
                    <img id="Person" src="images/icons/tabBar/image0.png">
                </div>
                <div id="SDiv">
                    <img id="Sale" src="images/icons/tabBar/image1.png">
                </div>
                <div id="CtDiv">
                    <img id="Current" src="images/icons/tabBar/image2.png">
                </div>
                <div id="FDiv">
                    <img id="Food" src="images/icons/tabBar/image3.png">
                </div>
                <span id="Stretch"></span>
            </div>

---

这种方法的问题是，我正在构建一个移动混合应用程序。因此，它必须在许多屏幕尺寸上工作。目前，它在大屏幕和电脑上看起来很棒，但在屏幕较小的手机上，要么图像开始被截取，要么其中一个图像被截取并生成一条新线路。相反，我需要图像缩小并保持均匀间隔。

您是否尝试过使用CSS缩放图像，例如：

img {
  width: 100%;
  height: auto;
}

这将阻止创建新线或被切断的图像

编辑：

---

jsiddle link:

您是否尝试过使用CSS缩放图像，例如：

img {
  width: 100%;
  height: auto;
}

这将阻止创建新线或被切断的图像

编辑：

---

jsiddle链接：

您的CSS类（CtDiv与CDiv）不匹配。这将CDiv保留为块元素

如果我可以建议的话。。。整个“拉伸”是不必要的，24%只会让你陷入舍入误差。我会推荐更像这样的东西：

HTML

一般来说，这应该是一些较轻的重量，但更重要的是。。。允许您更好地分离样式和结构

甚至让你成为小提琴手：

---

您的CSS类（CtDiv与CDiv）不匹配。这将CDiv保留为块元素

如果我可以建议的话。。。整个“拉伸”是不必要的，24%只会让你陷入舍入误差。我会推荐更像这样的东西：

HTML

一般来说，这应该是一些较轻的重量，但更重要的是。。。允许您更好地分离样式和结构

甚至让你成为小提琴手：

---

我们可以假设您的所有图像都具有相同的尺寸吗？是的，它们对于像素都具有相同的尺寸吗？我们可以假设您的所有图像都具有相同的尺寸吗？是的，它们对于像素都具有相同的尺寸谢谢，这非常有帮助，但是现在页面宽度越小，图像在选项卡栏上的位置就越高。我只会使用边距或填充，但它们向上定位的数量似乎取决于屏幕宽度。一旦它变得足够大，它们看起来又正常了。我已经删除了

#拉伸

，并将div上的

显示：内联块

替换为

浮动：左

，并给了它们一个边距。这将使您的图像彼此相邻，并具有间距，并在较小的屏幕上正确地缩小它们的比例。希望这有帮助。谢谢，这很有帮助，但是现在页面越小，标签栏上的图像位置就越高。我只会使用边距或填充，但它们向上定位的数量似乎取决于屏幕宽度。一旦它变得足够大，它们看起来又正常了。我已经删除了

#拉伸

，并将div上的

显示：内联块

替换为

浮动：左

，并给了它们一个边距。这将使您的图像彼此相邻，并具有间距，并在较小的屏幕上正确地缩小它们的比例。希望这有帮助。

<div id="tabBar">
   <div id="PDiv"></div>
   <div id="SDiv"></div>
   <div id="CDiv"></div>
   <div id="FDiv"></div>
</div>

#tabBar {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #F3F3F3;
    width: 100%;
    height:40px;
}
#PDiv, #SDiv, #CDiv, #FDiv {
    background-color:#F3F3F3;
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center center;
    width: 25%;
    vertical-align: top;
    display: inline-block;
    float:left;
    height:100%;
}
#PDiv {
    background-image:url(images/icons/tabBar/image0.png);
}
#SDiv {
    background-image:url(images/icons/tabBar/image1.png);
}
#CDiv {
    background-image:url(images/icons/tabBar/image2.png);
}
#FDiv {
    background-image:url(images/icons/tabBar/image3.png);
}