如何给所有div每侧相同的空间 [英] How to give all divs same amount of space on each side

问题描述

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

Hello I've got a question about a layout.

我有一个网站，可以在div中填充信息.这些Div需要彼此相邻，并且它们之间以及容器div的侧面之间应具有相同的空间.我正在手机上制造它，所以我不知道那里的屏幕宽度，并且在所有不同的屏幕分辨率下都应该看起来不错.

I have a website where I fill divs with information. These Divs need to be next to each other with the same amount of space between them and between the sides of the container div. I'm making it for mobile phones so I don't know the width of there screens and it should look fine on all the different screen resolutions.

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

Currently I've got this: 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; 
}

然后它们之间有相等的空间，但容器的侧面之间没有.

Then it has an equal amount of space between them but not between the sides of the container.

我不知道会有多少个div，我知道它们是150px x 150px.它们和容器之间的边距应相同，显示的大小无关紧要.如果屏幕较小，则彼此之间的div应当更少，但是它们之间的空间应该增加或除脂.因此，它们与容器div之间的边距是相同的.

I don't know how many divs there will come what I do know is that they are 150px by 150px. They should have the same amount of margin between them and the container, and it shouldn't matter what the size of the display is. If the screen is smaller there should be less divs next to each other but the space between them should increase or degrease. So the margins between them and the container div is the same.

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

Here is an image of how I want it :) 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之间使用灵活/合拢的边距.间隙应取决于浏览器的宽度和折叠前请具有最大宽度"和最小宽度"(以下元素切换到下一行). 元素网格"必须在内容"中居中.

I need flexible/collapsing margins between the "element" divs. The gaps should be depending on the browser-width & have a "max-width" and "min-width" before collapsing (following elements switch to next row). The "elements-grid" needs to be centered within the "content".

我非常感谢您的帮助，因为我已经尝试了我所知道的一切.预先感谢！

I really appreciate your help, because I have tried everything I know. Thanks in advance!

推荐答案

如果要执行此操作，则需要javascript的帮助.

If you want to do this, you'll need a little help from javascript.

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

The idea is to get the width of the window, and than to distribute it in between your elements.

您可能会在这里找到我的小提琴: http://jsfiddle.net/P84qd/

You may find my fiddle here : http://jsfiddle.net/P84qd/

在html文件中，我只是通过类名更改了您的ID(在html文件中，您永远不应两次拥有相同的ID) 在css文件中，我刚刚将正方形定义为float:left.

In the html file, I just changed your id's by class names (you should never have the same id twice in an html file) In the css file, I just defined the squares to be float:left.

最后是javascript:

Finally the 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();};  

它可能不是很优化，但这是个主意. 首先获取文档的宽度，然后在放置所有平方后计算剩余空间(因此取模).为了计算最终的边距大小，您需要将其余部分除以每条线的平方数再加上一个(因为样式中还需要左右边框). 然后，只需在需要的地方添加一些填充/边距就可以了.

It might not be very optimized, but here is the idea; You first get the width of your document, you then calculate the rest of the space once you put all your squares (thus the modulo). In order to calculate your final margin size, you will need to divide the rest by the number of squares per line plus one (since you want the left and right border also in your style). Than, simply add some paddings/margins where you need to, and you're done.

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

In order to make it work when you resize your window, you need to call window.onresize

希望它会有所帮助:)

这篇关于如何给所有div每侧相同的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！