Question

我有一个非常嵌套的div结构，我试图在3列中进行排序。

<div class="view-content">

<div class="view-grouping">
    <h1>Group 1</h1>
    <div class="view-grouping-content">  
        <div class="views-limit-grouping-group">
            <h2>Subgroup 1</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 1</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 2</div>
            </div>
        </div> <!-- end of Subgroup 1 -->
        <div class="views-limit-grouping-group">
            <h2>Subgroup 2</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 3</div>
            </div>
        </div> <!-- end of Subgroup 2 -->
        <div class="views-limit-grouping-group">
            <h2>Subgroup 3</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 4</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 5</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 6</div>
            </div>
        </div>  <!-- end of Subgroup 3 -->
    </div> <!-- end of inner Group 1 wrapper -->
</div> <!-- end of Group 1 -->

<div class="view-grouping">
    <h1>Group 2</h1>
    <div class="view-grouping-content">  
        <div class="views-limit-grouping-group">
            <h2>Subgroup 4</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 7</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 8</div>
            </div>
        </div> <!-- end of Subgroup 4 -->
        <div class="views-limit-grouping-group">
            <h2>Subgroup 5</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 9</div>
            </div>
        </div> <!-- end of Subgroup 5 -->
        <div class="views-limit-grouping-group">
            <h2>Subgroup 6</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 10</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 11</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 12</div>
            </div>
        </div>  <!-- end of Subgroup 6 -->
    </div> <!-- end of inner Group 2 wrapper -->
</div> <!-- end of Group 2 -->

每三分之一（3n + 3）.custom-widget应该有一个margin-right: 0;

如果我使用：

.view-grouping .view-grouping-content .views-limit-grouping-group:nth-child(3n+3) .custom-widget{   
    margin-right: 0;
}

由于嵌套的div结构，它不会起作用。

这是一个动态布局（在Drupal构建中使用它），因此可以有任意数量的组，子组。此外，可能没有。如果任何前面提到的分组DIV中的项目。

为了一个简单的例子，我把主包装器放在320px，它应该包含3个元素，包括前2个项目的10px间距。

我完全可以使用CSS和jQuery来解决这个问题。你有什么想法我应该怎么做？

谢谢！

P.S。 jsFiddle这里：https://jsfiddle.net/6m2bqaa1/1/

Answer 1

Use nth-of-type, hopefully it will help you:

.views-limit-grouping-group > div:nth-of-type(3) .custom-widget{margin-right:0}


or you can add whole css as under:

h1, h2 {
    display: none;
}

.views-limit-grouping-group{clear:both; overflow:hidden}

.views-limit-grouping{float:left}

.view-content{
    position: relative;
    margin: 0 auto;
    width: 320px;
}

.custom-widget{
    background-color: lightblue;
    float: left;
    width: 100px;
    height: 100px;
    margin-top: 10px;
    margin-right: 10px;
}

.views-limit-grouping-group > div:nth-of-type(3) .custom-widget{
    margin-right: 0;
    background: red;
}

your problem will be solve.

用于重度嵌套div结构的CSS / jQuery nth-child

1 个答案: