Question

我有一个div，其元素可以动态添加和删除。是否可以定义一个css类，确保相应的元素始终显示为div的第一个子元素（即在顶部）

或者我是否需要在div上附加一个on change事件监听器，通过js将孩子移到顶端？

Answer 1

您可以在父级上使用display: flex，然后使用子级上的order属性将其放在您想要的位置。

ul {
  display: flex;
  flex-direction: column;
}
.first {
  order: -1;
}

<ul>
  <li>asdf</li>
  <li>asdf</li>
  <li class="first">first</li>
</ul>

Answer 2

这里有修复：

HTML

<div>
  <p>Must not be first 1</p>
  <p>Must not be first 2</p>
  <p class="first">Must be first</p>
  <p>Must not be first 3</p>
</div>

CSS

div {
  display:flex;
  flex-flow:column wrap;
}

.first {
  order:-1;
}

https://jsfiddle.net/rp1m8874/

Answer 3

有点hacky，但你可以在需要先保留的类中添加一个类，然后在其上设置position: absolute; top: 0。你必须将所有其他元素按下第一个高度。

.container {
  position: relative;
}
.container div {
  position: relative;
  top: 15px;
  height: 15px;
}
.container div.first {
  position: absolute;
  top: 0;
}

<div class="container">
  <div>
    another div
  </div>
  <div class="first">
    I should be first
  </div>
  <div>
    another div
  </div>
</div>

Answer 4

如果您使用的是Jquery，请单击

$("#yourContainer").prepend("<div>This div will be first!</div>");

我可以使用css始终将元素保留为第一个孩子

4 个答案: