我需要将四个水平对齐的图像间隔开一行。我知道这里已经多次询问过,但我找到的解决方案都没有对我有用。它们似乎都依赖于行的固定宽度或图像的固定宽度。我需要以百分比来指定它们。
我的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;
}
这种方法的问题在于我正在构建移动混合应用程序。因此,它必须适用于许多屏幕尺寸。目前它在大屏幕和电脑上看起来很棒,但是在屏幕尺寸较小的手机上,图像开始被切断,或者其中一个进入并开始新线。相反,我需要将图像缩小并保持均匀间隔。
答案 0 :(得分:2)
您是否尝试使用CSS扩展图像,如下所示:
img {
width: 100%;
height: auto;
}
这样可以防止您创建新行或被剪切的图像。
编辑:
jsfiddle链接:http://jsfiddle.net/ATube/
答案 1 :(得分:1)
你的CSS课程不匹配(#CtDiv vs #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/