如何使用 css 将一组元素带到紧邻的下一行

Question

我想做什么？

我正在尝试使用 CSS.

将一组元素从最后一个元素开始带到紧邻的下一行

html:

<div id="test">
  <button class="t_btn"> btn1 </button>
  <button class="t_btn"> btn2 </button>
  <button class="t_btn"> btn3 </button>
  <button class="t_btn"> btn4 </button>
  <button class="t_btn"> btn5 </button>
</div>

CSS:

#test .t_btn:nth-last-child(-n+3){
    display: block;
}

这就是我想要的：

Answer 1

这是一个关于 flexbox 的想法。诀窍是添加一个隐藏元素，该元素将通过更改顺序来推动您的元素：

#test {
 display:flex;
 flex-wrap:wrap;
}
#test:before {
  content:"";
  width:100%;
  order:1;
}

#test .t_btn:nth-child(n+4){
  order:2;
}

<div id="test">
  <button class="t_btn"> btn1 </button>
  <button class="t_btn"> btn2 </button>
  <button class="t_btn"> btn3 </button>
  <button class="t_btn"> btn4 </button>
  <button class="t_btn"> btn5 </button>
  <button class="t_btn"> btn6 </button>
  <button class="t_btn"> btn7 </button>
  <button class="t_btn"> btn8 </button>
</div>

或者像这样：

#test {
 display:flex;
 flex-wrap:wrap;
}
#test:before {
  content:"";
  width:100%;
  order:1;
}

#test .t_btn:nth-last-child(-n+3){
  order:2;
}

<div id="test">
  <button class="t_btn"> btn1 </button>
  <button class="t_btn"> btn2 </button>
  <button class="t_btn"> btn3 </button>
  <button class="t_btn"> btn4 </button>
  <button class="t_btn"> btn5 </button>
  <button class="t_btn"> btn6 </button>
  <button class="t_btn"> btn7 </button>
  <button class="t_btn"> btn8 </button>
</div>

如何使用 css 将一组元素带到紧邻的下一行

How to bring set of elements to immediate next line using css

css

newline