Question

我正在尝试将DOM元素显示顺序排列在底部到顶部。但是无法找到实现它的方法。我是CSS的初学者。请帮我解决这个问题。这是一个由JS生成的动态DOM，因此无法更改HTML。

例如：

<div>
   <img src='abc.jpg'>
   <a href='google.com'>Google</a>
   <p >It is google</p>
</div>

预期结果：

  <div> 
    <p >It is google</p>
    <a href='google.com'>Google</a>
     <img src='abc.jpg'>
  </div>

或：

<div> 
   <a href='google.com'>Google</a>
    <p >It is google</p>
     <img src='abc.jpg'>
  </div>

Answer 1

 div { 
   display: flex; 
   flex-flow:wrap;
 }
 img{
  order: 3;
  flex-basis: 100%;
 }
 a {
   order: 2;
   flex-basis: 100%;
 }
 p {
   order:1 ;
   flex-basis: 100%;
 }

Answer 2

使用flexbox： http://jsbin.com/mesijerike

div {
 width: 200px;
 display: flex;
 flex-direction: column-reverse;
}

img {
  max-width: 100%
}

Answer 3

您可以将这些弹性框css放在父div中

display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;

使用CSS从底部到顶部排列元素

3 个答案: