用百分比等距分隔的div的響應式設計

Question

Working example和JS Fiddle

試圖拿出一個解決方案，創建一個ul li列表顯示的項目分開等距，但使用的百分比。

該解決方案需要能夠響應地工作，即塊（帶有文本覆蓋的圖像）的尺寸都會減小，並且它們之間的空間減小到iPad尺寸。在典型的手機解決方案中，他們會堆疊。

有三個元素，但使用百分比的好處是可以添加一個額外的元素，而無需重做大部分CSS。希望塊（在這種情況下li項目）將相應地調整它們的大小和空間。

我試過用一些等距的CSS技巧玩here，但它們並不適合響應。

我打算使用max-width:100%，使圖像的大小調整爲當前li的最大寬度，使得較大的圖像可以在不需要用於調整大小（保存周圍交換圖像時的時間，並且意味着相同的圖像，可以使用網站上的其他地方）

li列表不需要使用，會打開使用簡單的div或span結構。

任何想法？

第一期：在我的JS Fiddle示例中，您可以看到圖像根據窗口大小對齊和調整大小。然而，最右邊的元素不與右邊緣齊平（它們通常都是左對齊的）。雖然我添加了text-align:justify但它似乎並沒有產生所需的影響

第二期：三個不均勻分佈是一個問題。 30％不是真正的三分之一，33％似乎推動了它。

第三期：空白。有沒有辦法阻止放在不同行上的li之間的邪惡空白？我必須犧牲可讀的HTML來擺脫空白嗎？

HTML：

<div id="bottomWide"> 
    <ul> 
    <li><img src="#" alt="text"></li> 
    <li><img src="#" alt="text"></li> 
    <li><img src="#" alt="text"></li> 
    </ul> 
</div> 

CSS：

bottomWide {

width:85%; 
margin:0 auto; 
border:1px solid red;} 

bottomWide UL {

margin:0; 
padding:0; 

}

bottomWide李{

list-style-type: none; 
display: inline-block; 
width:30%; 
text-align:justify; 

}

bottomWide IMG {

max-width:100%; 

}

媒體查詢堆疊（效果很好）

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) { 
/* Styles */ 
    #bottomWide li{ 
    display:block; 
    width:100%; 
} 
} 

Answer 1

這是一種方法：

http://jsfiddle.net/YT3KZ/3/

我改變了李到float:left;而非display:inline-block;並增加了一個margin-left: 1%;和所作的寬度32.333％以補償1％的餘量和傳播它在整個div。

這將在li的左邊留出1％的邊距，並在右邊截掉1％，因此您需要在ul上反面留有餘量，或者您可以添加位置類來執行此操作。

margin-left:-1%; 

另一種方式來做到這一點是使容器比你的頁面寬度，使他們正確地定位和使用負保證金/填充，以彌補這將被切斷的部分。

PS。只注意到你不想差距..刪除1% margin，並改變它的li到33.333%

http://jsfiddle.net/YT3KZ/7/

注：我沒有刪除了不需要的CSS。例如。 text-align:justify;所以你可以清理它。