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

时间：2012-11-15 11:36:45

标签： css margin equals fluid-layout

您好我对布局有疑问。

我有一个网站，我在其中填写信息。这些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会出现，我知道的是它们是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之间的边距。差距应取决于浏览器的宽度和宽度。在折叠之前具有“max-width”和“min-width”（在元素切换到下一行之后）。 “元素 - 网格”需要在“内容”中居中。

我非常感谢你的帮助，因为我已经尝试了所有我知道的事情。提前谢谢！

5 个答案:

答案 0 :(得分：1)

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

  1. 使用ID时，不能多次使用。使用类来定位多个元素。
  2. 您的.foto元素之间的空格会在页面上造成额外的不需要的空白。删除要修复的空格。
  3. 我不得不放一些东西（在这个例子中是一个不间断的空间）给div一些内容，因为它对我来说不合适。

    4. 容器具有左/下10px填充，而每个.foto元素具有顶部/右侧10px边距。这使得它们都具有通用性，这意味着您可以调整浏览器的大小以使所有块排成一行并在所有块周围具有相同的边框，就像在每个块周围一样。

    希望有帮助吗？

    修改：http://jsfiddle.net/vgqNX/20/

    希望以上内容会更符合您的目标吗？

    注意：根据Urg Mu调查响应式布局可能更好。在调整大小时会注意到闪烁但是只有在拖动窗口使其变大或变小时才会发生闪烁。

答案 1 :(得分：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();};

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

为了在调整窗口大小时使其正常工作，您需要致电window.onresize

希望有所帮助：）

答案 2 :(得分：0)

尝试添加边距以设置您的照片之间的距离。避免使用display：inline，因为这是专门针对TEXT的。但是“你可以在任何你想要的东西上使用它。”说 - cimmanon。在内部容器上添加填充。然后使用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;
}

答案 3 :(得分：0)

更新div id foto css 

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

背景：＃FC0; }

答案 4 :(得分：0)

仅CSS解决方案

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

Demo

此技术使用每个元素的包裹来计算每个方格之间的间距。
块之间以及块与窗口之间的空格相等。

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

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

您可能也会回答这个问题：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%;
    }
}
相关问题
最新问题