如何为所有 div 的每一侧提供相同的空间

您好，我有一个关于布局的问题。

我有一个网站，我在 div 中填充信息。这些 Div 需要彼此相邻，它们之间以及容器 div 两侧之间的空间大小相同。我正在为手机制作它，所以我不知道屏幕的宽度，它应该在所有不同的屏幕分辨率上看起来都很好。

目前我有这个： 小提琴：Fiddle http://jsfiddle.net/hgwd92/vgqNX/

HTML:

<div id="container">
<div id="lineout">
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
</div>

​

CSS:

#container {
    text-align: center;
    display: inline-block;
    margin:0 auto;
}
#foto{
    width: 150px;
    height: 150px;
    display: inline-block;  
}

#lineout {
    text-align:justify; 
}

然后它们之间的空间相等，但容器两侧之间的空间不相等。

我不知道会有多少个 div，但我所知道的是它们的大小为 150px x 150px。它们和容器之间应该有相同的边距，并且显示器的尺寸是多少并不重要。如果屏幕较小，则彼此相邻的 div 应该较少，但它们之间的空间应该增加或减少。所以它们和容器div之间的边距是相同的。

这是我想要的图像:)s7.postimage.org/h342d0qhn/layout2.png http://s7.postimage.org/h342d0qhn/layout2.png

重新表述我的问题：

<div class="content">
<div class="elements-grid">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>

我需要“元素”div 之间的灵活/折叠边距。间隙应取决于浏览器宽度，并在折叠之前具有“最大宽度”和“最小宽度”（以下元素切换到下一行）。 “元素网格”需要位于“内容”的中心。

我真的很感谢你的帮助，因为我已经尝试了我所知道的一切。提前致谢！

如果你想做到这一点，你需要 javascript 的一些帮助。

这个想法是获取窗口的宽度，而不是将其分布在元素之间。

你可以在这里找到我的小提琴：http://jsfiddle.net/P84qd/ http://jsfiddle.net/P84qd/

在html文件中，我只是通过类名更改了你的id（你不应该在html文件中两次使用相同的id） 在 css 文件中，我刚刚将正方形定义为float:left.

最后是 JavaScript：

function resize(){
    var sizeOfImg = 150;
    var windowWith = document.body.offsetWidth;
    var widthRest = windowWith%sizeOfImg;
    var marginVal = widthRest/(Math.floor(windowWith/sizeOfImg)+1);
    var lineout = document.getElementById('lineout');
    lineout.style.paddingLeft = marginVal+'px';
    lineout.style.paddingTop = marginVal+'px';
    var fotos = document.getElementsByTagName('div');
    for(var i=0, length = fotos.length;i<length; i++){
        if(fotos[i].className === 'foto'){
            fotos[i].style.marginRight = marginVal+'px'; 
            fotos[i].style.marginBottom = marginVal+'px';        
        }       
    }
}
resize();
window.onresize = function(e){resize();};  

它可能不是很优化，但这是想法； 您首先获得文档的宽度，然后在放置所有方块（即模数）后计算剩余的空间。为了计算最终的边距大小，您需要将其余部分除以每行的方块数加一（因为您希望左右边框也符合您的样式）。 然后，只需在需要的地方添加一些填充/边距，就完成了。

为了使其在调整窗口大小时起作用，您需要调用window.onresize

希望能帮助到你 ：）