Question

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

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

对于任意SIBLING 1，我希望将它们布局，以便m的余量为SIBLING 2，而m+o的余量为o一些SIBLING 3和m+2o的余量为SIBLING n，直到m+o(n-1)的余量为SIBLING 1 SIBLING 2 SIBLING 3 ... SIBLING n。所以结果应该是这样的：

adb logcat | findstr /R /C:"com.company.application"

换句话说，边缘（本例中为左边距）随着每个兄弟的增加而增加。很容易为每个兄弟姐妹做一个规则，但有一个更通用的解决方案吗？

Answer 1

对于他们来说是兄弟姐妹，这很可能是唯一一个只使用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>

Answer 2

我用.wrapper div包裹每个兄弟姐妹。

＆＃13;

.wrapper > .wrapper {
    margin-left: 1em;
}

＆＃13;

<div class="parent">

    <div class="wrapper">
        <div>SIBLING 1</div>

        <div class="wrapper">
            <div>SIBLING 2</div>

            <div class="wrapper">
                <div>SIBLING 3</div>

                <div class="wrapper">
                    <div>SIBLING N</div>
                </div>

            </div>

        </div>

    </div>

</div>

＆＃13;

JSFiddle

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

2 个答案: