防止并排元素周围的双边框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了防止并排元素周围的双边框相关的知识，希望对你有一定的参考价值。
如果您有多个带有1px边框的容器，则彼此相邻的所有容器都会生成2px边框。所以为了摆脱你总是设置，例如border-right: none;，然后将border-right: 1px;添加到最后一个孩子，使所有容器的四面都有1px边框。
但是如果你使用flexbox flex-basis规则将容器分成下一行，它会打破整个border-right的想法，在休息之前的行中的最后一个容器总是保持不带边框。
例如在这个例子中，我有5个容器，但我想要每行4个，当它突破到新行时，你可以看到border-right问题：
.wrapper {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.container {
flex-basis: 20%;
border: 1px solid #000;
border-right: none;
margin-bottom: 1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:last-child {
border-right: 1px solid #000;
}<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
</div>答案
由于您知道每行中有多少个弹性项目，因此您可以使用:nth-child()选择器将边界应用于主规则遗漏的项目。
.wrapper {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.container {
flex-basis: 20%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
margin-bottom: 1px;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:nth-child(4n + 1) { /* add border to first child in each row */
border-left: 1px solid red;
}<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
</div>
<hr>
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
</div>
<hr>
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
<div class="container">6</div>
<div class="container">7</div>
<div class="container">8</div>
<div class="container">9</div>
<div class="container">10</div>
</div>另一答案
您可以尝试以下解决方案：
1
在这里，您不需要.container:last-child样式。
.container {
flex-basis: 20%;
border: 1px solid #000;
margin-bottom: 1px;
margin-right: -1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
2
这适用于4号，8号，12号等箱子。
.container {
flex-basis: 20%;
border: 1px solid #000;
border-right: none;
margin-bottom: 1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:last-child,
.container:nth-child(4n) {
border-right: 1px solid #000;
}
以上是关于防止并排元素周围的双边框的主要内容，如果未能解决你的问题，请参考以下文章