将内部div根据其编号对齐

Question

I have 4 div elements inside another div. From the application the user can choose how many divs to be displayed.

Whenever he chooses less than 4 I want the remaining divs to be align to the center. I manage to do this with Jquery, can it be done using css?? Below is my jquery code, the problem with it is that when the page loads the user cand see for few miliseconds the divs unaligned.

I don't want that, I want the divs to be align soon as the pages is loaded(refreshed)

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();
};

Working Fiddle

Answer 1

I think you want something like this :

WORKING : DEMO

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

I would accomplish what you described by adding flex-box to the mix, I've personally used it in tandem with bootstrap and it works brilliantly.

Here's a jsFiddle with a demonstration of both forced ordering and fluid centering without jQuery.

jsFiddle

The below code is a demonstration of how you can add flex-box to your project. Make sure you place it after bootstrap or it may not work. Worst case scenario you can add an !important tag but doing so highly frowned upon by the community.

.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;
}   

An excellent, easy to understand resource on flex box: CSS-Tricks.