選擇動態網格中第一行的所有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

回答

相關問題