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

工作Fiddle

Answer 1

我想你想要这样的东西：

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

我会通过添加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-Tricks.

将内部div与其中心对齐

2 个答案: