0

我需要将四个图像连续水平对齐。我知道这里已经被问过很多次了，但是我找到的解决方案都没有对我有用。它们似乎都依赖于行的固定宽度或图像的固定宽度。我需要以百分比指定两者。

我的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

#tabBar
{
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #F3F3F3;
    width: 100%;
    text-align: justify;

}
#PDiv, #SDiv, #CDiv, #FDiv
{
    background-color: #F3F3F3;
    width: 24%;
    vertical-align: top;
    height: auto;
    display: inline-block;
}
#Stretch
{
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

这种方法的问题是我正在构建一个移动混合应用程序。因此，它必须适用于许多屏幕尺寸。目前它在大屏幕和电脑上看起来很棒，但在屏幕较小的手机上，要么图像开始被截断，要么其中一个图像开始换行。相反，我需要将图像缩小并保持均匀分布。

4

2 回答 2

2

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

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

这将防止您创建新线条或被切断的图像。

编辑：

jsfiddle 链接：http: //jsfiddle.net/ATube/

于 2013-08-24T17:37:52.970 回答
1

您的 CSS 类不匹配（#CtDiv 与 #CDiv）。这使得 CDiv 成为一个块元素。

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

HTML

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

CSS

#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);
}

一般来说，这应该更轻一些，但更重要的是……让你更好地分离风格和结构。

甚至让你成为一个小提琴：http: //jsfiddle.net/F6khC/

于 2013-08-24T17:55:33.687 回答