1

ラッパー div と多くのコンテンツ ブロックがあります。コンテンツ ブロックは任意の数にすることができます。

<div class="wrapper">
  <div class="content-block">Something goes here</div>
  <div class="content-block">Something goes here</div>
                             .
                             .
                             .
  <div class="content-block">Something goes here</div>
</div>

以下に示すように、これらのコンテンツ ブロックを使用してピラミッド構造を形成したいと考えています。

ここに画像の説明を入力

このようなピラミッドを達成することは可能ですか? 上の画像は一例です。コンテンツ ブロックは 10 個を超えたり、10 個以下になったりする場合があります。

4

3 に答える 3

3

この非常に単純な JavaScript/CSS ソリューションを確認してください。

var objContainer = document.getElementById("container"),
  intLevels = 10,
  strBlocksHTML = '';

// Using innerHTML is faster than DOM appendChild
for (var i = 0; i < intLevels; i++) {
  for (var n = 0; n < i + 1; n++) {
    strBlocksHTML += '<div class="buildingBlock"></div>';
  }
  strBlocksHTML += '<div></div>'; // Line break after each row
}

objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px 5px;
  background-color: #eee;
  border: 2px solid #ccc;
}

#container {
  text-align: center;
}
<div id="container"></div>

于 2012-05-02T10:49:30.473 に答える
1

はい、完全に可能ですが、より正確な要件がなければ書き留めるのは困難です。div の数は、明らかに要素の数 = 10 に等しくなります。一番下の行の長さ = (10/2 - 1) で、次の行から上の行への要素が 1 つ少なくなるなどです。div スタイルで絶対配置を使用するか、テーブルを行列として扱い、セルで描画します。すべての空の「ピクセル」と、ブラウザーでセルのサイズと位置を再計算する際のオーバーヘッドが二次的に増加するため、テーブル ソリューションは行が増えると次第に遅くなります。

于 2012-05-02T10:17:29.197 に答える
1

うーん、簡単な作業ではありません。任意の数の要素に対して (有限の) CSS を作成することはできないと思います。次のようなものが必要です。

#wrapper {
  text-align: center;
}

.content-block {
  display: inline-block;
  width: 5em;
  height: 4em;
  margin: 0 2.5em;
}

.content-block:nth-child(n*(n+1)/2)::after {
  display: block;  /* linebreak */
}

-selectorには三角数が含まれますが、nth-child形式は でなければなりません。an+b

于 2012-05-02T10:20:02.300 に答える