3

div の次の位置に移動します。

  1. 2 つの div がある場合、それらはページの中央に配置する必要があります
  2. 3 つの div がある場合、それらは 1 行に配置する必要があります
  3. 4 つの div がある場合、そのうちの 3 つを 1 つの行に配置し、最後の 1 つを左側の次の行に配置する必要があります。
  4. 5 つの div がある場合、そのうちの 3 つを 1 行に配置し、最後の 2 つを中央の次の行に配置する必要があります。

私の問題は、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 に答える