Question

我有一个父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添加到第二个{ {1}}。

如果最后一行有3个div，那么我想将div和border-left添加到第二个div（中间一个）。

（当你看到片段或小提琴时，你会得到全貌）

我设法通过使用JS解决了这个问题，但我正在寻找一个纯CSS解决方案，如果有的话。

border-right

$('.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;
}

JSFiddle

Answer 1

我从未想过用纯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)

当它紧跟在3n ^th子项后面时，选择父div的最后一个子项。如果最后一个孩子紧跟3n ^th孩子，那么它显然是最后一行中的唯一项目。

div > div:nth-child(3n+1) + div:nth-last-child(1)

当它紧跟在3n + 1 ^th子项后，选择父div的最后一个子项。如果最后一个孩子紧跟3n + 1 ^th孩子，那么这意味着最后一行有2个项目。

div > div:nth-child(3n+1) + div:nth-last-child(2)

当它紧跟在3n + 1 ^th子项后，选择父div的第二个最后一个子项。如果第二个孩子紧跟3n + 1 ^th孩子，那么这意味着最后一行有3个项目。

我们不能将选择器div > div:nth-child(3n+2) + div:nth-last-child(1)用于最后一行有3个项目的情况，因为我们需要设置样式的中间元素而不是最后一个，

.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添加div，前提是它只有2个项目。如果您需要将border-right应用于最后一行中只有2个项目的第一个div，则可以使用以下选择器：

div > div:nth-child(3n+1):nth-last-child(2)

这意味着，当它恰好是3n + 1 ^th div时，选择父div的倒数第二个子节点。如果匹配此选择器，则表示最后一行有两个项目。

.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>

Answer 2

通常添加边框会更改元素的边框尺寸。几何变化本身可能会将元素移动到下一行。鸡蛋问题。

因此你不能通过CSS手段来做到这一点。即使使用JS，你也要小心 - 在某些情况下你可能不会想要。

根据最后的元素

2 个答案: