在响应式设计中固定不同尺寸的元件之间的间距

时间:2013-07-25 15:09:30

标签: html css responsive-design

首先,对于满口而言是抱歉。

我正在尝试使用流体容器和不同大小的项目进行响应式导航。我需要知道是否可以(如果是这样的话)保持所有物品的物品之间的间距相同,同时保持第一件物品和最后一件物品冲洗到容器的边缘。

Desired outcome Resized Result

红色表示间距,所有元素之间应该相同

我可以很容易地做一些像上面那样固定宽度的东西,但是一旦窗口调整大小,我似乎无法将间隙增大/缩小到合适的大小。

百分比边距似乎是对此的答案但是因为容器可以调整大小但内部的项目不能,如果窗口太小或者如果窗口太小则不会到达下一行的项目太大了我还尝试将元素设置为固定宽度然后text-align:center;,但间距不是设计师想要的。

必须兼容所有现代浏览器和IE 7 +

这是一个(制作得很糟)的小提琴:http://jsfiddle.net/GGwdW/

1 个答案:

答案 0 :(得分:2)

检查此解决方案,可能会有所帮助:{{3p>

对于旧的EYE,有text-align-last属性。