css - 如何在每一侧给所有div相同的空间

Question

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

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

目前我有这个: fiddle :Fiddle

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

重新表述我的问题:

<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 之间的灵活/折叠边距。间隙应取决于浏览器宽度并在折叠前具有“最大宽度”和“最小宽度”(以下元素切换到下一行)。 “元素网格”需要在“内容”中居中。

非常感谢您的帮助，因为我已经尝试了我所知道的一切。提前致谢!

Answer 1

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

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

你可以在这里找到我的 fiddle :http://jsfiddle.net/P84qd/

在 html 文件中，我只是通过类名更改了你的 id(你不应该在 html 文件中两次使用相同的 id)在 css 文件中，我只是将方 block 定义为 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();};  

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

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

希望对您有所帮助:)