如何给所有div在每一侧提供相同数量的空间

Question

您好我有关于布局的问题.

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

目前我有这个:小提琴:小提琴

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乘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 的一些帮助。

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

你可以在这里找到我的小提琴： 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

希望能帮助到你 ：）