我有一个父 div#main,它在行中包含未知数量的 divs。每行有 3 个 divsdisplay: inline-block 。现在,因此, 最后一行 可以包含 1、2 或 3 个 divs ,具体取决于它们的数量。

如果 最后一行 只有 1 个 div,那么我想添加 border-leftborder-right 到它。

如果 最后一行 有 2 个 div,那么我想将 border-right 添加到该行的第一个 div ,或者将 border-left 添加到第二个 div

如果 最后一行 有 3 个 div,那么我想将 border-leftborder-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)
  • 当紧跟在第 3n+1 个 child 之后时,选择父 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)
    
  • 这意味着,当它也恰好是第 3n+1 个 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/

    10-12 12:54
    查看更多