如何平等地分配填充

Question

我有三個並排的圖像..等寬..
如何將填充左側屬性的百分比適合多個設備？
通過浸軋左派的比例，我不希望圖像是在身旁，自己..希望他們可用的屏幕寬度均勻

img { padding-left: some% } 

考慮圖像的寬度相等之間分配..如果填充左邊是很多，它推動第三個圖像到一些設備的下一行

Answer 1

This pure CSS2 solution做這項工作：

標記：

<div id="images"> 
    <div> 
    <img src="" alt="" /><img src="" alt="" /><img src="" alt="" /> 
    </div> 
</div> 

樣式表（提供images e.g. 100px wide）：

#images { 
    overflow: hidden; 
} 
#images div { 
    position: relative; 
    margin: 0 -50px; 
    font-size: 0; 
} 
#images img { 
    position: relative; 
    left: 25%; 
    margin-left: -50px; 
} 
#images img + img { 
    position: absolute; 
    left: 50%; 
} 
#images img + img + img { 
    left: 75%; 
} 

說明：

Answer 2

您可以在您的CSS中使用媒體查詢來定位特定的屏幕寬度，然後使用填充左側的％來補償不同的屏幕，例如

@media only screen and (max-device-width: 480px) { } 

這將只針對最大寬度爲480px的屏幕

Answer 3

不需要額外的標記，Flexbox就會做你所需要的和它自動靈活。缺點是尚未得到廣泛支持。

http://jsfiddle.net/hv3Gk/（不包括前綴，嘗試歌劇）

div.container { 
    display: flex; 
    width: 100%; 
    justify-content: space-between; 
    flex-flow: row wrap; /* or nowrap if you know its guaranteed to fit no matter what */ 
} 

div.container img { 
    flex: 0 0 100px; 
    width: 100px; 
    min-height: 100px; 
    background: red; 
} 

否則，您可以使用display: table性能，但它需要額外的標記。它將在IE8 +以及過去5年發佈的任何其他瀏覽器版本中工作。

http://jsfiddle.net/hv3Gk/1/

div.container { 
    display: table; 
    width: 100%; 
} 

div.container div { 
    display: table-cell; 
} 

div.container div:first-child + div { 
    text-align: center; 
} 

div.container div:last-child { 
    text-align: right; 
} 

div.container img { 
    width: 100px; 
    min-height: 100px; 
    background: red; 
}