使用CSS和JS创建金字塔 [英] Creating a Pyramid using CSS and JS

问题描述

我有一个封装的div和许多内容块。内容块可以是任意数字。

I have a wrapper div and many content blocks. The content block can be of any number.

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

我想使用这些内容块形成一个金字塔结构，如下所示：

I wish to form a pyramid structure using these content-blocks as it appears below:

是否有可能实现这样的金字塔？上面的图片只是一个例子，可以有超过10个内容块，甚至更少。

Is it possible to achieve pyramid like this? The above image is just an example, there can be more than 10 content-blocks or even less.

推荐答案

简单的JavaScript / CSS解决方案：

Check out this very simple JavaScript/CSS solution:

http：// jsfiddle .net / Q8KUS / 20 /

干杯

这篇关于使用CSS和JS创建金字塔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！