将内部div根据其编号对齐

Question

我在另一个div中有4个div元素。 用户可以从应用程序中选择要显示的div数。

每当他选择小于4时，我都希望其余的div与中心对齐。 我设法用Jquery做到这一点，可以使用CSS完成吗？ 下面是我的jquery代码，它的问题是，当页面加载时，用户可以看到几毫秒的div未对齐。

我不希望那样，我希望div在页面加载（刷新）后尽快对齐

的HTML

<div id="alignColumns">
     <div class="col-lg-3 wow zoomIn" style="padding: 0;"></div>    
     <div class="col-lg-3 wow zoomIn" style="padding: 0;"></div>               
     <div class="col-lg-3 wow zoomIn" style="padding: 0;"></div> 
     <div class="col-lg-3 wow zoomIn" style="padding: 0;"></div> 
</div>

jQuery的

alignCols = function () {
    if (($("#alignColumns > div").length) == 3)
    {
        $("#alignColumns").css('margin-right','-133px')
    }
    else if (($("#alignColumns > div").length) == 2)
    {
        $("#alignColumns").css('margin-right', '-250px')
    }
    else if( ($("#alignColumns > div").length) == 1)
    {
        $("#alignColumns").css('margin-right', '-390px')
    }
};
window.onload = function () {
    alignCols();
};

工作小提琴

Answer 1

我想你想要这样的东西：

工作：演示

的HTML

<center>
<div id="alignColumns">
             <div class="col-lg-3 wow zoomIn">DIV 1 <br><br><br><button id="1">Remove</button></div>    
             <div class="col-lg-3 wow zoomIn">DIV 2 <br><br><br><button id="2">Remove</button></div>               
             <div class="col-lg-3 wow zoomIn">DIV 3 <br><br><br><button id="3">Remove</button></div> 
             <div class="col-lg-3 wow zoomIn">DIV 4 <br><br><br><button id="4">Remove</button></div> 
</div>
</center>

JS

$('button').click(function()
                {
                    var a = this.id; 
                    if(a==1)
                    {
                        $(".wow:first-child").hide();
                    }

                    else if(a==2)
                    {
                        $(".wow:nth-child(2)").hide();
                    }

                    else if(a==3)
                    {
                        $(".wow:nth-child(3)").hide();
                    }

                    else if(a==4)
                    {
                        $(".wow:last-child").hide();
                    }

                    else
                    {
                        alert("EXCEPTION");
                    }

                });

的CSS

#alignColumns
{
    display:block;
    padding:10px;
    width:90%;
    position:relative;
    background:#ddd;
    height:auto;
    overflow:auto;
    vertical-align:center;
}

.wow
{
    display:inline-block;
    width:23.8%;
    position:relative;
    padding:5px 0px;
    margin:0px 1px;
    background:#333;
    text-align:center;
    height:90px;
    color:white;
}

Answer 2

通过将flex-box添加到混音中，我可以完成您所描述的事情，我个人将其与bootstrap一起使用，并且效果很好。

这是一个jsFiddle，演示了没有jQuery时的强制排序和流体居中。

jsFiddle

以下代码演示了如何将flex-box添加到项目中。 确保将其放在引导程序之后，否则可能无法工作。 在最坏的情况下，您可以添加！important标记，但这样做却引起社区的高度反对。

.flex-container {
    display: -webkit-flex;
    display:    -moz-flex;
    display:     -ms-flex;
    display:      -o-flex;
    display:         flex;
    -webkit-justify-content:center;
    -moz-justify-content: center;
    justify-content: center;
}

.flex-item {
// add options
}

.one {
    -moz-order: 1;
    -webkit-order: 1;
    order: 1;
}
.two {
    -moz-order: 2;
    -webkit-order: 2;
    order: 2;
}
.three {
    -moz-order: 3;
    -webkit-order: 3;
    order: 3;
}
.four {
    -moz-order: 4;
    -webkit-order: 4;
    order: 4;
}   

弹性框上的一个很好的，易于理解的资源： CSS技巧。