javascript - Creating a Pyramid using CSS and JS - Stack Overflow

admin管理员组

文章数量:1334329

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:

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.

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:

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
• jquery
• css

Share Improve this question Follow asked May 2, 2012 at 9:39 AnkitAnkit 80177 silver badges1111 bronze badges 3

• It's possible even in the mand-line, how much more CSS and JS? Reminds me of a homework in C. – Joseph Commented May 2, 2012 at 9:41
• You should provide more requirements. Because there are so many ways to do that, each one adapted to a given real problem. Google "css block positioning" as a starter. – Denys Séguret Commented May 2, 2012 at 9:43
• @rory I had been experimenting with css and jquery and wanted to know if things have bee easy with javascripts. I was thinking to calculate length() i.e. no of div using jquery and then providing css depending on no. of block elements. But truly, I was looking for a better approach. – Ankit Commented May 2, 2012 at 9:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Check out this very simple JavaScript/CSS solution:

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>

Yes, it is perfectly possible, but hard to write down without more precise requirements. Number of divs would obviously equal number of elements = 10. Length of bottom row = (10/2 - 1) with each next row to top taking one less element, etc. Either use absolute positioning in div style or treat table as matrix and draw with cells. Table solution will be progressively slower with more rows, because all the empty "pixels" and quadratically increasing overhead on recalculating cell sizes and positions in browser.

Hm, not a trivial task. I don't think it is possible to write (finite) CSS for any number of elements. It would need something like this:

#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 */
}

Where the nth-child-selector would contain a triangular number, but it must have the form an+b.

本文标签： javascriptCreating a Pyramid using CSS and JSStack Overflow