Looking for a set of CSS rules that can layout an unknown number of siblings blocks into a staircase formation.
Let's say I have a number of sibling DIV elements within an enclosing one:
<div class="parent">
<div>SIBLING 1</div>
<div>SIBLING 2</div>
...
<div>SIBLING n</div>
</div>
For an arbitrary n
and I wish to have them laid out so that SIBLING 1
has a margin of m
and that SIBLING 2
has margin m+o
for some o
and SIBLING 3
has a margin of m+2o
, until SIBLING n
has a margin of m+o(n-1)
. So the results should look something like this:
SIBLING 1
SIBLING 2
SIBLING 3
...
SIBLING n
In other words the margin (margin-left in this example) increases with each sibling. It is easy to do a rule for each sibling with nth-child but is there a more generic solution?