javascript - 如何在不同的位置有不同的div？

Question

我将为我的 div 设置以下位置:

1. 如果我有两个 div，它们应该位于页面中间
2. 如果我有三个 div，它们应该位于一行
3. 如果我有四个 div，其中三个应该在一行中，最后一个应该在左边的下一行
4. 如果我有五个 div，其中三个应该在一行中，最后两个应该在中间的下一行

我的问题是当我有四个 div 时，最后一个在下一行的中间。

这是我的代码:

HTML

<div id="cards-overview" class="mt60"> 
    <div class="row-fluid" >
        <div class="span12">
            <div th:each="card, cardStat : ${dashboard.cards}"
                class="card-container-outer" style="display:      inline-block; text-align:left">
                <div class="card-container pointer">
                    <div th:switch="${card.status}">
                        <i th:id="${'card-status-' + card.windPowerStationId}"
                            th:case="1"
                            class="icon-status icon-status-ok card-status-tooltip navy-tooltip">
                            <span
                            th:id="${'card-status-description-' + card.windPowerStationId}"
                            th:text="${card.statusDescription}"></span>
                        </i> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.mt60 {
margin-top: 60px;
text-align: center;
}

.card-container-outer {
width: 480px;
}

.card-container {
margin-left: auto;
margin-right: auto;
width: 310px;
height: 510px;
position: relative;
}

Answer 1

(提示:margin: 0 auto；优于 margin-left 和 margin-right auto)

您可以将第一行居中并在最后一行左对齐，方法是将其放在容器上:

text-align: center;
text-align-last: left;