我正在使用具有 12 列的网格。我想给每个 div 一个 margin-top:20px 除了第一行的 div。但我很难找出第一行中有哪些 div,因为它未定义。第一行可以包含 1 到 12 个 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 选择器也不起作用。第一个 child ,第 n 个 child 。 知道如何在第一行中选择 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>
最佳答案
我认为使用纯 CSS 不可能做到这一点。这是使用 jQuery 的一些替代方法。首先,为网格容器(cols 的直接父级)提供一些特定的类/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
关于css - 选择动态网格中第一行中的所有 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42133551/