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

【问题标题】：How to give all divs same amount of space on each side如何在每一侧为所有 div 提供相同数量的空间
【发布时间】：2012-11-04 00:09:21
【问题描述】：

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

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

目前我有这个：小提琴：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，我只知道它们是 150 像素 x 150 像素。它们和容器之间应该有相同的边距，显示器的大小无关紧要。如果屏幕较小，则相邻的 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 之间的灵活/折叠边距。间隙应取决于浏览器宽度，并且在折叠之前具有“最大宽度”和“最小宽度”（以下元素切换到下一行）。 “元素网格”需要在“内容”中居中。

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

【问题讨论】：

我很困惑，像这样？：jsfiddle.net/vgqNX/2
嗨，你想要这个jsfiddle.net/vgqNX/3
嘿，谢谢您的回答，我想要一个布局，其中有 150 像素宽和 150 像素高的 div 彼此相邻，如果您调整屏幕 div 的大小，则 div 和容器之间的空间应该相同如果它们不再“适合”，则应该下降。但是所有的 DIV 应该再次在它们周围有相同数量的空间。像这样：image of layout
这个比你习惯了jsfiddle.net/vgqNX/6
id 应该是唯一的，并且永远不能用于多个元素。请改用class。

标签： css margin equals fluid-layout

【解决方案1】：

尝试添加边距以设置照片之间的距离。避免使用 display:inline，因为它专门用于 TEXT。但是“你可以随心所欲地使用它。”说——西马农。在内部容器上添加填充物。然后使用 FLOAT。

#foto{
    width: 150px;
    height: 150px;
    margin: 10px 10px 0px 0px;
    float:left;
    background: #FC0;    
}

#lineout {
    padding: 50px 0px 50px 50px;
}

关闭Div容器后会有问题。设置下一个元素的浮动。以下是解决方法。

HTML：

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

CSS：

#endContainer {
    clear:both;
}

【讨论】：

“避免使用 display:inline 因为这是专门针对文本的”谁说的？您可以随心所欲地使用它。
感谢您的回答 :) 但这并不是我的意思，你的 lineout div 有 50px 的填充，但我想要你有 10px 的边距；与 50px 的 padding 相同；。（不要不给边距 50px :P）当你调整窗口大小时，边距应该改变，所以当你调整它的边距时，在你的情况下，填充改变并且它们都是相同的。所以 foto Div 在所有边都有相等的边距。
我的意思是喜欢这张图片：s10.postimage.org/eltd72vo9/layout.png 在这里你可以看到灰色的 div 之间的空间相等。然后我想如果你改变屏幕尺寸，它们之间的空间量会改变，所以这将再次彼此相等。这有点难以解释..
只需更改边距的值。提醒一下，那是边距：右上左下；分别。要解决根据屏幕改变大小的问题，请检查这个.. seesparkbox.com/foundry/structuring_a_responsive_stylesheet
使用 INLINE 会导致像 SPAN 这样的显示元素

【解决方案2】：

http://jsfiddle.net/vgqNX/17/

使用 ID 时，不能多次使用。使用一个类来定位多个元素。
.foto 元素之间的空白会导致页面上出现多余的多余空白。删除空格进行修复。
我不得不放一些东西（在这种情况下是一个不间断的空格）给 div 一些内容，因为它对我来说看起来不正确。

容器有一个左/下 10 像素的内边距，而每个 .foto 元素都有一个上/右 10 像素的边距。这使得它们都具有通用性，这意味着您可以调整浏览器的大小以使所有块对齐并在所有块周围具有相同的边框，就像在每个块周围一样。

希望有帮助吗？

编辑：http://jsfiddle.net/vgqNX/20/

希望以上内容更符合您的需求？

注意：您最好按照Urg Mu 研究响应式布局。当您调整大小时，您会注意到闪烁，但只有当您拖动窗口以使其变大/变小时才会发生这种情况。

【讨论】：

感谢您的回答 :) 但这不是我想要的。当您调整浏览器屏幕的大小时，几乎连续有 4 个 div。但是您仍然看到连续 3 个在 div 的右侧有一个巨大的白色间隙。而且我想要那个空白在所有 div 之间平均分配例如，边距是灵活的，并且它会根据剩余的空白量来扩展或脱脂。我希望你能帮助我:)

【解决方案3】：

如果你想这样做，你需要一点 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

希望对你有帮助:)

【讨论】：

谢谢你:D!!!!!!!!!这正是我所需要的 :) 我将立即实施它！非常感谢，我从来没有想过使用 javascript 来解决这个问题，但是现在当我看到它时，它就很清楚了 :) 再次感谢，谢谢 :)

【解决方案4】：

更新 div id foto css

   #foto{ width: 130px; height: 130px; margin:0 20px 20px 0; display: block; float:left;

背景：#FC0; }

【讨论】：

【解决方案5】：

仅 CSS 解决方案

可以使用媒体查询来实现您的布局。

Demo

这种技术对每个元素使用一个换行来计算每个正方形之间的空间。
块之间以及块和窗口之间的空间是相等的。

我编写的代码需要调整/优化，并且我没有为超过 751 像素的屏幕编写查询。在我继续之前，我想知道你是否对它感兴趣。

如果你愿意，我也可以提供一些关于它的额外细节/解释，因为它非常复杂。

您可能也对此答案感兴趣：responsive square columns

这里是相关代码：

HTML：

<div id="container">
    <div class="wrap">
        <div class="foto">1</div>
    </div>
    <div class="wrap">
        <div class="foto">2</div>
    </div>
    ... and so on ...
</div>

CSS：

.wrap {
    float:left;
    position:relative;
}
.foto {
    width: 150px;
    height: 150px;
    background: gold;
    position:absolute;
}

#warning{display:none;}
@media screen and (min-width: 631px) {
    .wrap {
        width:20%;
        padding-bottom:25%;
    }
    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){

    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-30px;
    }
    .wrap:nth-child(4n+2){
        margin:0 5% 0 7.5%;
    }
    .wrap:nth-child(4n+3){
     margin-right:7.5%;
    }
    .wrap:nth-child(4n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
    .wrap:nth-child(4n+3) .foto{
        right:50%;
        margin-right:-75px;
    }
    .wrap:nth-child(4n) .foto{
        left:-30px;
    }   
    #container{
        margin-top:-45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
    .wrap {
        width:25%;
        padding-bottom:33.3%;
    }
    .wrap:nth-child(3n+2){
        margin:0 12.5%;        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-37px;
    }
     .wrap:nth-child(3n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
     .wrap:nth-child(3n) .foto{
        left:-37px;
    }
    #container{
        margin-top:-37px;
    }
}


@media screen and (min-width: 331px) and (max-width: 480px) {
    .wrap {
        width:33.3%;
        padding-bottom:50%;
        clear:left;
    }
    .wrap:nth-child(even) {
        float:right;
        clear:right;
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-50px;
    }
    .wrap:nth-child(even) .foto {
        left:-50px;
    }
    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
        bottom:-75px;
        margin-bottom:100%;
    }
    #container{
        margin-top:-25px;
    }
}


@media screen and (max-width: 330px) {
    .wrap {
        width:50%;
        padding-bottom:100%;
        clear:left;
    }
    .wrap:nth-child(odd) .foto {
        right:-75px;
        bottom:0;
        bottom:-75px;
        margin-bottom:100%;
    }
    .wrap:nth-child(even) .foto {
        top:0px;
        right:-75px;
        top:-75px;
        margin-top:100%;
    }
}

【讨论】：