6

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

我有一个网站，可以在其中填写 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>

​</p>

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

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

4

5 回答 5

1

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

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

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

希望有帮助？

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

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

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

于 2012-11-15T13:41:28.403 回答
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

希望能帮助到你 ：）

于 2012-11-15T14:44:56.313 回答
0

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

#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;
}
于 2012-11-15T12:42:07.110 回答
0

更新 div id foto css

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

背景：#FC0；}

于 2012-11-16T06:04:11.730 回答
0

仅 CSS 解决方案

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

演示

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

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

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

您可能也对这个答案感兴趣：响应式方柱

以下是相关代码：

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%;
    }
}
于 2014-04-20T18:00:42.557 回答