我有一个父 div#main
,它在行中包含未知数量的 divs
。每行有 3 个 divs
是 display: inline-block
。现在,因此, 最后一行 可以包含 1、2 或 3 个 divs
,具体取决于它们的数量。
如果 最后一行 只有 1 个 div,那么我想添加 border-left
和 border-right
到它。
如果 最后一行 有 2 个 div,那么我想将 border-right
添加到该行的第一个 div
,或者将 border-left
添加到第二个 div
。
如果 最后一行 有 3 个 div,那么我想将 border-left
和 border-right
添加到第二个 div(中间的)。
(当你看狙击手或 fiddle 时,你会得到完整的画面)
我设法通过使用 JS 解决了这个问题,但我正在寻找 纯 CSS 解决方案 ,如果有的话。
$('.main').each(function(){
var div_length = $(this).find('div').length;
if((div_length % 3) === 0){
div_last_items = div_length;
}
else if((div_length % 3) === 1){
div_last_items = div_length - 1;
$(this).find('div:nth-last-child(1)').addClass('active-borders');
}
else if((div_length % 3) === 2){
div_last_items = div_length - 2;
$(this).find('div:nth-last-child(2)').addClass('active-border');
}
$(this).find('div:lt('+div_last_items+')').each(function(i){
i=i+2;
if(i % 3 === 0){
$(this).addClass('active-borders')
}
});
});
.main {
width: 360px;
text-align: center;
}
.main>div {
display:inline-block;
vertical-align:top;
width: 100px;
height: 100px;
background:red;
margin-top: 10px;
margin-bottom: 10px;
}
.main>div:nth-child(3n+2) {
margin-left: 20px;
margin-right: 20px;
}
.active-borders{
border-left: 5px solid black;
border-right: 5px solid black;
}
.active-border{
border-right: 5px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<hr>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<hr>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
JSFiddle
最佳答案
我从没想过这可以用纯 CSS 实现,但确实如此。所有学分都将归功于 this answer 展示了如何实现这一点的想法。这个答案基于此,但我正在起草一个单独的答案,因为这里的选择器有点不同,我想解释一下。
选择器添加:
div > div:nth-child(3n) + div:nth-last-child(1) {
border-left: 5px solid black;
border-right: 5px solid black;
}
div > div:nth-child(3n+1) + div:nth-last-child(1) {
border-left: 5px solid black;
}
div > div:nth-child(3n+1) + div:nth-last-child(2) {
border-left: 5px solid black;
border-right: 5px solid black;
}
解释:
div > div:nth-child(3n) + div:nth-last-child(1)
div
紧跟在第 3n 个子节点之后时,选择它的最后一个子节点。如果最后一个 child 紧跟在第 3n 个 child 之后,那么它显然是最后一行中唯一的元素。 div > div:nth-child(3n+1) + div:nth-last-child(1)
div
紧跟在第 3n+1 个 child 之后时,选择它的最后一个 child 。如果最后一个 child 紧跟在第 3n+1 个 child 之后,则意味着最后一行有 2 个元素。 div > div:nth-child(3n+1) + div:nth-last-child(2)
div
的倒数第二个 child 。如果倒数第二个 child 紧跟在第 3n+1 个 child 之后,则意味着最后一行有 3 个元素。 对于最后一行有 3 个元素的情况,我们不能使用选择器
div > div:nth-child(3n+2) + div:nth-last-child(1)
,因为我们需要对中间元素而不是最后一个元素进行样式设置,.main {
width: 360px;
text-align: center;
}
.main>div {
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
background: red;
margin-top: 10px;
margin-bottom: 10px;
}
.main>div:nth-child(3n+2) {
margin-left: 20px;
margin-right: 20px;
}
div > div:nth-child(3n) + div:nth-last-child(1) {
border-left: 5px solid black;
border-right: 5px solid black;
}
div > div:nth-child(3n+1) + div:nth-last-child(1) {
border-left: 5px solid black;
}
div > div:nth-child(3n+1) + div:nth-last-child(2) {
border-left: 5px solid black;
border-right: 5px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<hr>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<hr>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
如果最后一行中的第二个
border-left
只有 2 个元素,则上面代码片段中的选择器会添加一个 div
。如果您需要将 border-right
应用于只有 2 个元素的最后一行中的第一个 div
,则可以使用以下选择器:div > div:nth-child(3n+1):nth-last-child(2)
div
时,选择父 div
的倒数第二个 child 。如果此选择器匹配,则意味着最后一行有两个元素。 .main {
width: 360px;
text-align: center;
}
.main>div {
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
background: red;
margin-top: 10px;
margin-bottom: 10px;
}
.main>div:nth-child(3n+2) {
margin-left: 20px;
margin-right: 20px;
}
div > div:nth-child(3n) + div:nth-last-child(1) {
border-left: 5px solid black;
border-right: 5px solid black;
}
/*div > div:nth-child(3n+1) + div:nth-last-child(1) {
border-left: 5px solid black;
}*/
div > div:nth-child(3n+1):nth-last-child(2){
border-right: 5px solid black;
}
div > div:nth-child(3n+1) + div:nth-last-child(2) {
border-left: 5px solid black;
border-right: 5px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<hr>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<hr>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
关于css - 根据最后一个元素添加边框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31231945/