將內部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技巧。