反转只有特定的Div子元素的顺序。

huangapple
go评论92阅读模式
英文:

Reverse the order of only certain Div children elements

问题

  1. #parent {
  2.     display: flex;
  3.     flex-direction: column;
  4. }
  6. #sub-child {
  7.     display: flex;
  8.     flex-direction: column-reverse;
  9. }
英文:

How can you reverse the order of only certain div's children elements with pure CSS?

For example:

I want

  1. <div id="parent">
  2.     <a>A</a>
  3.     <a>B</a>
  4.     <a>C</a>
  5.     <a>D</a>
  6.     <div id="sub-child">
  7.         <a>X</a>
  8.         <a>Y</a>
  9.         <a>Z</a>
  10.    </div>
  11. </div>

to be displayed as:

D

C

B

A

X

Y

Z

I tried:

  1. #parent {
  2.     display:flex;
  3.     flex-direction: column-reverse; 
  4. }

However, It is reversing everything inside parent (Not giving desired result)

答案1

得分: 2

  1. 在 #parent 和 #sub-child 上应用 display: flex；
  2. 为 #parent 设置 flex-direction: column-reverse，为 #sub-child 设置 flex-direction: column；
  3. 对于 #sub-child 使用负数 order，以保持该节点位于底部。
  1. #parent {
  2.   display: flex;
  3.   flex-direction: column-reverse;
  4. }
  6. #sub-child {
  7.   order: -1;
  8.   display: flex;
  9.   flex-direction: column;
  10. }
  1. <div id="parent">
  2.   <a>A</a>
  3.   <a>B</a>
  4.   <a>C</a>
  5.   <a>D</a>
  6.   <div id="sub-child">
  7.     <a>X</a>
  8.     <a>Y</a>
  9.     <a>Z</a>
  10.   </div>
  11. </div>
英文:
  1. apply display: flex on both #parent and #sub-child;
  2. give flex-direction: column-reverse for the #parent and flex-direction: column for #sub-child;
  3. use a negative order for #sub-child so to keep that node at the bottom

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. #parent {
  2.  display: flex;
  3.  flex-direction: column-reverse;
  4. }
  6. #sub-child {
  7.   order: -1;
  8.   display: flex;
  9.   flex-direction: column;
  10. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;parent&quot;&gt;
  2.     &lt;a&gt;A&lt;/a&gt;
  3.     &lt;a&gt;B&lt;/a&gt;
  4.     &lt;a&gt;C&lt;/a&gt;
  5.     &lt;a&gt;D&lt;/a&gt;
  6.     &lt;div id=&quot;sub-child&quot;&gt;
  7.         &lt;a&gt;X&lt;/a&gt;
  8.         &lt;a&gt;Y&lt;/a&gt;
  9.         &lt;a&gt;Z&lt;/a&gt;
  10.    &lt;/div&gt;
  11. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月17日 16:06:44
  • 转载请务必保留本文链接：https://go.coder-hub.com/76269847.html
  • bootstrap-4
  • css
  • html
  • jquery
  • twitter-bootstrap
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定