通过调整边距用多个子 div 填充父 div

Question

我有什么：

父 div .parent 将整个窗口 width=100% 作为宽度，但有一定的最小宽度，例如 min-width=800px。

现在我有大约 20 个 .child div，假设使用宽度为 width=300px，未定义高度，margin:20px 和 display:inline-block。

现在的问题是，例如较小的屏幕每行将显示两个 div，但它们将不再居中，因为它们的邻居掉到了下一行。

我在孩子身上尝试了float:center 和margin:5px auto 5px auto;，但浮动似乎根本不起作用，边距只会导致 0 边距

所以我想要的是：

将所有子 div 水平居中在父级中，同时仍在使用例如通过调整它们之间的边距，屏幕宽度的 80%。第 2 部分更多是可选的

现在的样子（当然不工作）

HTML

<div class="buttons">
    <div class="host 1">&nbsp;</div>
    <div class="host 2">&nbsp;</div>
    <div class="host 3">&nbsp;</div>
    <div class="host 4">&nbsp;</div>
    <div class="host 5">&nbsp;</div>
    ...
</div>

CSS

.buttons {
    position:relative;
    width:100%;
    margin:50px 0 0 0;
    padding:0;
}
.host {
    display:inline-block;
    padding:0;
    margin:20px 20px 5px 20px;
    height:20px;
    width:300px;
    float:center;
}

Answer 1

要将它们水平居中，请将text-align:center; 添加到父级：

.buttons {
    position:relative;
    width:100%;
    margin:50px 0 0 0;
    padding:0;
    text-align:center;
}

Demo

---

四周边距相等

可能有数百种更好的方法可以做到这一点，但是 ...这是我在星期六慵懒的下午 :)

Demo（调整窗口大小）

（与上面相同的html和css）

var hosts = $('.host');
var buttons= $('.buttons');
$(window).on('load resize',function(){
    var w = buttons.width();
    /* how many .host in one row ? */
    var oneRow = Math.floor(w/300);
    /* let's go! */
    if(oneRow>1){
        /* send hosts to the margin calculation function */
        calcMargins(hosts,w,oneRow);
        /* do we have some orphans?! */
        var orphans = hosts.length%oneRow;
        if(orphans!=0){
            /* let's do the same for them */
           var orphansEl = hosts.slice(-orphans);
           calcMargins(orphansEl,w,orphans);
       }
    }else{
        /* there's only one div per row, so
            we reset everything */
        hosts.css({'margin-left':'auto','margin-right':'auto','float':'none'});
    }
});

/* here's the function */
function calcMargins(els,l,r){
    /* total blank space */
    var tSpace = l - (r*300);
    /* we'll add a right margin for each .host and
         a margin-left for the first of each row */
    var nElements = r + 1; 
    /* it's better to leave some pixels behind
        than cause a line wrap, so we'll floor the division */
   var rightMargin = Math.floor(tSpace/nElements);
   /* finally, we set the margins */
   els.each(function(i){
       if(i%r == 0){
           /* left margin for first .host of each row */
           leftMargin = rightMargin;
       }else{
           /* left margin for the rest */
           leftMargin = 0;
       }
       /* here we go */
       $(this).css({'float':'left','margin-left':leftMargin,'margin-right':rightMargin});
    });
}​

显然，为了清楚起见，它是这样写的，但您可以将其简化为：

var hosts = $('.host'), buttons= $('.buttons');
$(window).on('load resize',function(){
    var w = buttons.width(), oneRow = Math.floor(w/300);
    if(oneRow>1){
        calcMargins(hosts,w,oneRow);
        var orphans = hosts.length%oneRow;
        if(orphans!=0) calcMargins(hosts.slice(-orphans),w,orphans);
    }else{
        hosts.css({'margin-left':'auto','margin-right':'auto','float':'none'});
    }
});
function calcMargins(els,l,r){
   var rightMargin = Math.floor((l-(r*300))/(r+1));
   els.each(function(i){
       leftMargin = (i%r == 0) ? rightMargin : 0;
       $(this).css({'float':'left','margin-left':leftMargin,'margin-right':rightMargin});
    });
}​

如果您不希望“孤儿”居中，这里有一个更小的版本：

var hosts = $('.host'), buttons= $('.buttons');
$(window).on('load resize',function(){
    var l = buttons.width(), r = Math.floor(l/300);
    if(r>1){
       var rightMargin = Math.floor((l-(r*300))/(r+1));
       hosts.each(function(i){
           leftMargin = (i%r == 0) ? rightMargin : 0;
           $(this).css({'float':'left','margin-left':leftMargin,'margin-right':rightMargin});
        });
    }else{
        hosts.css({'margin-left':'auto','margin-right':'auto','float':'none'});
    }
});

...带有 demo。

---

如果有人有更短的解决方案，我很乐意学习 :)