javascript - 使用 CSS 和 JS 创建金字塔

标签 javascript jquery css

我有一个包装 div 和许多内容 block 。内容 block 可以是任意数量。

<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>

我希望使用这些内容 block 形成金字塔结构,如下所示:

enter image description here

有没有可能实现这样的金字塔?上图只是一个示例,内容 block 可以超过 10 个甚至更少。

最佳答案

看看这个非常简单的 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>

关于javascript - 使用 CSS 和 JS 创建金字塔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10411215/

相关文章:

javascript - 如何将容器 div 及其所有内容缩放到特定大小?

javascript - 当我用完整的 url 链接脚本时,jQuery 脚本不工作

html - 如何使用 Bootstrap 限制元素宽度?

html - 列 flex 重叠后的 IE 11 元素

javascript - gl.texImage2D 适用于 Image,但不适用于 ImageData

javascript - Highcharts:使用 CSV 的热图

javascript - 如何仅在 "complete"完全完成后调用 jQuery 的 "success"(并保持长轮询)?

javascript - 开 Jest ,如何比较两个不同格式的字符串?

javascript - AngularJS 如何滚动到页面顶部?

css - 如何以最大尺寸在每张(纸)纸上打印 1 张图像