选择动态网格中第一行的所有div

我正在使用12列的网格。我想给每个div一个margin-top：20px，除了第一行的div。但我很难找出哪些div在第一行，因为它的未定义。第一行可以包含1到12个div。选择动态网格中第一行的所有div

我使用sass并尝试了以下解决方案，但这只适用于宽度相同的div。第一个例子不起作用，因为第二个div没有获得保证金。

// max. 12 rows. 
@for $colWidth from 1 through 12 {   
    // example: 3 divs in a row (colWidth = 4), 12/4+1 = 4. 
    // Set margin from the fourth element to the last element. 
    $number: (12/$colWidth) + 1; 

    // set margin only for banner-component 
    div.col-xs-#{$colWidth}:nth-child(n+#{$number}) section.banner-component { 
     margin-top: 20px; 
    } 
    div.col-sm-#{$colWidth}:nth-child(n+#{$number}) section.banner-component { 
     margin-top: 20px; 
    } 
}

Ohter css选择器也没有工作。第一个孩子，第n孩子。任何想法如何在第一行选择div？

下面是一些例子：

实施例1：第一行包含1个DIV（COL-LG-12）

<div> class="col-xs-12 col-lg-12"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div>

实施例2：第一行包含2周的div（COL-LG-6）

<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div>

实施例3：第一行包含3周的div（COL-LG-4）

<div> class="col-xs-4 col-lg-4"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-4 col-lg-4"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-4 col-lg-4"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div>

实施例4：第一行包含3周的div（COL-LG-4，COL-LG-6，COL-LG-2）

<div> class="col-xs-4 col-lg-4"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-4 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-4 col-lg-2"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div>

来源

2017-02-09 chansang

我不认为这是可能使用纯CSS。这里有一些使用jQuery的替代方法。首先，给网格容器（cols的直接父）提供一些特定的class/id。

添加一个类上的CSS

.with-top-margin{ 
    margin-top: 20px; 
}

jQuery的

var divs = $("#dynamic-cols-container > div"); 
var counter = 0; 

for(var i=0; i<divs.length; i++){ 
    var div = divs.get(i); 
    if(counter < 12) 
    $(div).addClass("with-top-margin"); 

    var divWidth = parseInt($(div).attr("class").split("col-lg-")[1].split(" ")[0]); 
    counter += divWidth; 
}

希望这有助于。这里有一个fiddle

来源

2017-02-09 10:18:20

如果你有在包装容器的所有关口的div的选项*

*只有在最后一行应与底部对齐需要。

<div class="grid"> 
... any number of col divs 
</div>

然后，你可以这样做：

// add top margin to all col divs and use translate to move them 
// up by the same amount (making first row align with top) 
[class*="col-"]{ margin-top: 20px; transform: translateY(-20px); } 

// in case you want the last row to align with the bottom 
// use a negative bottom margin on your container 
.grid { overflow: auto; margin-bottom: -20px; }

随着包装：

无包装：

来源

2017-02-09 13:43:55

感谢你们为您解答。两种变体都适合我。我选择了JQuery版本并将其转换为JSP。 – chansang

选择动态网格中第一行的所有div

回答

相关问题