使用CSS增加每个兄弟之间的保证金

2023年4月29日 185次阅读

寻找一组CSS规则,可以将未知数量的兄弟姐妹块布局成楼梯.

假设我在一个封闭的元素中有许多兄弟DIV元素：

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

对于任意n,我希望将它们布局,使得SIBLING 1具有m的余量,并且SIBLING 2具有一些o的余量mo,并且SIBLING 3具有m 2o的余量,直到SIBLING n具有mo的余量( N-1).所以结果应该是这样的：

    SIBLING 1
      SIBLING 2
        SIBLING 3
          ...
                     SIBLING n

换句话说,边缘(在该示例中为左边缘)随着每个兄弟而增加.对于每个有nth-child的兄弟姐妹来说很容易做一个规则,但是有更通用的解决方案吗？

最佳答案 对于他们来说是兄弟姐妹,这很可能是仅使用CSS(并且没有浮动)的唯一选择,并且因为你以大约十几个的顺序说,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>

根据评论更新.

使用媒体查询和一个小脚本,这很简单,没有框架,只有vanilla 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>
点赞