Javascript 使用CSS和JS创建金字塔

我有一个包装器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多个内容块，甚至更少。

是的，这是完全可能的，但是如果没有更精确的要求，很难写下来。div的数量显然等于元素的数量=10。下一行的长度=（10/2-1），从下一行到上一行少取一个元素，以此类推。可以使用div样式的绝对定位，也可以将表格视为矩阵并使用单元格绘制。表格解决方案将随着行数的增加而逐渐变慢，因为所有的“像素”都是空的，并且在浏览器中重新计算单元格大小和位置的开销将以二次方式增加。

是的，这是完全可能的，但如果没有更精确的要求，很难写下来。div的数量显然等于元素的数量=10。下一行的长度=（10/2-1），从下一行到上一行少取一个元素，以此类推。可以使用div样式的绝对定位，也可以将表格视为矩阵并使用单元格绘制。表格解决方案将随着行数的增加而逐渐变慢，因为所有的“像素”都是空的，并且在浏览器中重新计算单元格大小和位置的开销将以二次方式增加。

Hm，这不是一项简单的任务。我认为不可能为任何数量的元素编写（有限）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 */
}

---

其中，将包含a，但它必须具有形式

an+b

Hm，而不是一个简单的任务。我认为不可能为任何数量的元素编写（有限）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 */
}

---

其中将包含a，但它必须具有形式

an+b

查看此非常简单的JavaScript/CSS解决方案：

var objContainer=document.getElementById（“容器”），
intLevels=10，
strBlocksHTML=''；
//使用innerHTML比DOM appendChild更快
对于（变量i=0；i
.buildingBlock{
显示：内联块；
宽度：20px；
高度：20px；
保证金：2p5px；
背景色：#eee；
边框：2个实心#ccc；
}
#容器{
文本对齐：居中；
}
查看这个非常简单的JavaScript/CSS解决方案：


var objContainer=document.getElementById（“容器”），
intLevels=10，
strBlocksHTML=''；
//使用innerHTML比DOM appendChild更快
对于（变量i=0；i
.buildingBlock{
显示：内联块；
宽度：20px；
高度：20px；
保证金：2p5px；
背景色：#eee；
边框：2个实心#ccc；
}
#容器{
文本对齐：居中；
}
即使在命令行中，还有多少CSS和JS是可能的？让我想起了一个C语言的家庭作业。你应该提供更多的要求。因为有很多方法可以做到这一点，每一种方法都适用于给定的实际问题。谷歌“css块定位”是一个开始。@rory我一直在尝试css和jquery，想知道使用Javascript是否变得简单。我在考虑使用jquery计算length（），即div的数量，然后根据块元素的数量提供css。但说真的，我一直在寻找一种更好的方法。即使在命令行中，CSS和JS还有多少呢？让我想起了一个C语言的家庭作业。你应该提供更多的要求。因为有很多方法可以做到这一点，每一种方法都适用于给定的实际问题。谷歌“css块定位”是一个开始。@rory我一直在尝试css和jquery，想知道使用Javascript是否变得简单。我在考虑使用jquery计算length（），即div的数量，然后根据块元素的数量提供css。但说真的，我一直在寻找一个更好的方法。谢谢Bergi的回复，但是智囊团的解决方案是一个简单的方法+谢谢你的努力。好吧，但是每行多装一个容器的智囊团解决方案太简单了。它有另一个DOM比你介绍的-我想你想要一个CSS唯一的解决方案。感谢Bergi的回复，但是Mastermind的解决方案是一个简单的方法+谢谢你的努力。好吧，但是每行多装一个容器的智囊团解决方案太简单了。它有另一个DOM，而不是您介绍的—我以为您想要一个仅CSS的解决方案。