Question

我将为我的divs以下职位：

如果我有两个div，它们应该位于页面中间
如果我有三个div，它们应该位于一行
如果我有四个div，其中三个应该在一行中，最后一个应该在左边的下一行
如果我有五个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

（提示：保证金：0自动;优于margin-left和margin-right auto）

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

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

Answer 2

你可以使用display:inline-block使这些容器更具延展性，并且整个容器为text-align:center - 它们将以这种方式相互构建。然后，如果你编写少量的jQuery来检查有多少“容器”来分配最后一个元素的对齐属性。

var number = $('#containers').length();
if(number===4){
  $('#containers').last().css(//change the css properties to make the last div float left)
}

您可以在其中放置一些不同的if/else参数来确定对齐方式。

如何在不同的位置上有不同的div？

2 个答案: