使用百分比在div中均勻分隔空間圖像

我需要在一行中間隔四個水平對齊的圖像。我知道這已經在這裏多次提出，但是我發現的解決方案都沒有爲我工作。它們似乎都依賴於該行的固定寬度或圖像的固定寬度。我需要指定兩個百分比。使用百分比在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

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

這種方法的問題是，我建立一個移動式混合應用。因此，它將不得不在許多屏幕尺寸上工作。目前，它在大屏幕和電腦上看起來不錯，但在屏幕尺寸較小的手機上，圖像開始被切斷，或者其中一個出現並且換了新的線。相反，我需要圖像縮小並保持均勻間隔。

來源

2013-08-24 User093203920

我們是否可以假設所有的圖像具有相同的尺寸？ –

是的，它們的像素尺寸都是一樣的 – User093203920

你有沒有試着用CSS縮放您的圖像，像這樣：

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

這會防止你創建新的生產線，或者被切斷的圖像。

編輯：

的jsfiddle鏈接：http://jsfiddle.net/ATube/

來源

2013-08-24 17:37:52 Jrn

謝謝，這對我們有很大幫助，但是現在頁面寬度越小，標籤欄上的圖像位置就越高。我只是使用一個邊距或填充，但它們自己向上定位的數量似乎取決於屏幕寬度。一旦它變得足夠大，他們再次看起來很正常。 – User093203920

我已經刪除了'＃Stretch'，並且在你的div上用'float：left'替換了'display：inline-block'，並給了它們一個空白。這將使您的圖像以間距相鄰排列，並在較小的屏幕上正確縮放圖像。 http://jsfiddle.net/ATube/ 希望這會有所幫助。 – Jrn

你有一個不匹配你的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/

來源

2013-08-24 17:55:33

使用百分比在div中均勻分隔空間圖像

回答

相關問題