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 。

如果有人有更短的解决方案，我很乐意学习它：）

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

1 个答案: