2013-07-25 34 views
3

首先,對於標題的滿口感到抱歉。響應式設計中不同尺寸元素之間的固定間距

我正在嘗試使用流體容器和不同大小的物品做出響應式導航。我需要知道是否有可能(如果是這樣)將物品之間的間距保持爲所有物品的相同尺寸,同時將第一個和最後一個物品保持與容器邊緣齊平。

Desired outcome Resized Result

紅色示出了間隔,這應該是所有元件之間的相同

我可以執行類似上述的具有固定寬度很容易地,但只要該窗口是調整大小後,我似乎無法將差距縮小到合適的大小。

百分比邊際似乎是對此的答案,但由於容器可以調整大小,但是內部的項目不能,如果窗口太小或者沒有達到行尾,則項目要麼擴展到下一行窗戶太大了。我也嘗試將元素設置爲固定寬度,然後設置爲text-align:center;,但間距不符合設計師的要求。

必須與所有現代瀏覽器和IE 7+

這裏有一個(製作粗劣)小提琴的兼容:http://jsfiddle.net/GGwdW/

+2

+1,顯示出一些努力。 –

+1

檢查該解決方案,可能是有益的: http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly –

+0

@SergeyKochetov:那偉大工程,是我就在想這由於缺少':before'和':after',IE7將無法工作? - 我現在要說的是,如果IE7用戶看起來有點奇怪,他們會習慣它。謝謝! –

回答