使用 css 规则在奇数元素上创建浮动元素并在 HTML/CSS 中显示无/块

Question

我正在做一个包含元素列表（浮动或弹性）的程序，该列表可能显示“无”，可以动态更改。当它用选择器定义时，我设法在 CSS 中做到这一点：div:nth-child(odd)但是，如果我隐藏一个 div，它将不再起作用。我试过类似的东西div[style*="display: block;"]:nth-child(odd)但打破。* {box-sizing: border-box;} .flex-container {  width: 90%;  margin: 5px auto;  display: flex;  background-color: #ddd;  flex-direction: row;  flex-wrap: wrap;  justify-content: flex-start;  align-items: stretch;}.flex-container>div {  background-color: #f1f1f1;  display: block;  padding: 5px;  font-size: 12px;  cursor: pointer;  text-align: center;  width: 50%;  border-bottom: solid 1px #ccc;}.flex-container>div[style*="display: block;"]:nth-child(odd) {  border-right: solid 1px red;}<div class="flex-container">  <div id="flex1" style="display: block;">TEST 1</div>  <div id="flex2" style="display: block;">TEST 2</div>  <div id="flex3" style="display: block;">TEST 3</div>  <div id="flex4" style="display: block;">TEST 4</div>  <div id="flex5" style="display: block;">TEST 5</div></div><input type="button" onclick="document.getElementById('flex1').style.display = document.getElementById('flex1').style.display === 'none' ? 'block' : 'none'" value="Flex1" />使用按钮时，它显示/隐藏第一个 div。我想要的是这个红色边框总是在中间。我想尽可能避免使用 javascript。也许我完全错了，或者没有 javascript 是不可行的。

Answer 1

无需复杂化nth-child。您可以使用伪元素在中间简单地画一条线。

* {box-sizing: border-box;}

 

.flex-container {

  width: 90%;

  margin: 5px auto;

  display: flex;

  background-color: #ddd;

  flex-wrap: wrap;

  position:relative;

}

.flex-container:before {

  content:"";

  position:absolute;

  top:0;

  bottom:0;

  left:50%;

  width:1px;

  background:red;

}

.flex-container>div {

  background-color: #f1f1f1;

  padding: 5px;

  font-size: 12px;

  cursor: pointer;

  text-align: center;

  width: 50%;

  border-bottom: solid 1px #ccc;

}

<div class="flex-container">

  <div id="flex1" style="display: block;">TEST 1</div>

  <div id="flex2" style="display: block;">TEST 2</div>

  <div id="flex3" style="display: block;">TEST 3</div>

  <div id="flex4" style="display: block;">TEST 4</div>

  <div id="flex5" style="display: block;">TEST 5</div>

</div>

<input type="button" onclick="document.getElementById('flex1').style.display = document.getElementById('flex1').style.display === 'none' ? 'block' : 'none'" value="Flex1" />

这是使用 CSS 网格的另一个想法：

* {box-sizing: border-box;}

 

.flex-container {

  width: 90%;

  margin: 5px auto;

  display: grid;

  grid-template-columns:1fr 1fr;

  grid-column-gap:1px;

  background: 

    linear-gradient(red,red) center/1px 100% no-repeat,

    #ddd;

}

.flex-container>div {

  background-color: #f1f1f1;

  padding: 5px;

  font-size: 12px;

  cursor: pointer;

  text-align: center;

  border-bottom: solid 1px #ccc;

}

<div class="flex-container">

  <div id="flex1" style="display: block;">TEST 1</div>

  <div id="flex2" style="display: block;">TEST 2</div>

  <div id="flex3" style="display: block;">TEST 3</div>

  <div id="flex4" style="display: block;">TEST 4</div>

  <div id="flex5" style="display: block;">TEST 5</div>

</div>

<input type="button" onclick="document.getElementById('flex1').style.display = document.getElementById('flex1').style.display === 'none' ? 'block' : 'none'" value="Flex1" />