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 个，甚至更少。

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)，下一行到顶部减少一个元素，等等。要么使用 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 */
}

其中nth-child-selector将包含一个三角形数字，但它必须具有 形式an+b。

于 2012-05-02T10:20:02.300 回答