3

我将为我的 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;
}
4

2 回答 2

0

（提示：margin: 0 auto；优于 margin-left 和 margin-right auto）

您可以通过将其放在容器上来居中第一行并左对齐最后一行：

text-align: center;
text-align-last: left;
于 2013-05-24T13:31:24.560 回答
0

您可以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参数来确定对齐方式。

于 2013-05-24T14:23:43.357 回答