css - 使用 CSS 增加每个兄弟之间的边距

Question

寻找一组 CSS 规则，这些规则可以将未知数量的兄弟 block 布置成楼梯形式。

假设我在一个封闭的元素中有许多同级 DIV 元素:

<div class="parent">
    <div>SIBLING 1</div>
    <div>SIBLING 2</div>
    ...
    <div>SIBLING n</div>
</div>

对于任意n我希望把它们布置好，这样SIBLING 1边距为 m那SIBLING 2有 margin m+o对于一些 o和 SIBLING 3边距为 m+2o , 直到 SIBLING n边距为 m+o(n-1) .所以结果应该是这样的:

    SIBLING 1
      SIBLING 2
        SIBLING 3
          ...
                     SIBLING n

换句话说，边距(本例中的 margin-left)随着每个兄弟节点的增加而增加。为每个有第 n 个 child 的 sibling 制定规则很容易，但是否有更通用的解决方案？

Answer 1

对于他们是 sibling ，这很可能是仅使用 CSS(并且没有 float )的唯一选择，并且由于您说的是 十几个左右，CSS 将相当谦虚。

div {
  width: 30px;
  height: 20px;
  background: lightgray;
  text-align: center;
}
div:nth-child(1) { margin-left: 0px;   }        /* 1st */
div:nth-child(2) { margin-left: 30px;  }        /* 2nd */
div:nth-child(3) { margin-left: 60px;  }        /* 3rd */
div:nth-child(4) { margin-left: 90px;  }        /* 4th */
div:nth-child(5) { margin-left: 120px; }        /* 5th */
div:nth-child(6) { margin-left: 150px; }        /* 6th */

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

---

根据评论更新。

有了媒体查询和一个小脚本，这很简单，没有框架，只有普通的 javascript。

(function(w,d) {

  var steps = 30;
  
  w.addEventListener("load", function() {
    var divs = d.querySelectorAll('div');
    for (var i = 0; i < divs.length; i++) {
      divs[i].style.cssText = 'margin-left: ' + (steps * i) + 'px';
    }
  }, false);
  
}(window,document));

div {
  width: 30px;
  height: 20px;
  background: lightgray;
  text-align: center;
}
@media (max-width: 500px) {
  div {
    margin-left: 0 !important;     /* since the margin is set with inline style,
                                      we need important to override them         */
  }
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>