Question

我正在制作一个包含多个div的列表，其中一个div将使该类最新。

例如：

<div class="row">
    <div class="col-md-4"> more html</div>
    <div class="col-md-4"> more html </div>
    <div class="col-md-4 current"> more html </div>
    <div class="col-md-4"> more html </div>
</div>

现在这个类可能在任何div上，具体取决于之前选择的用户。（不太相关。只是fyi）

现在我希望current的div始终是行中显示的第一个。

我正在考虑用jquery删除div，然后将它追加到行中，但我不认为这是最干净的方法。

Answer 1

您可以使用display:flex和order：

执行此操作

.row {
    display:flex; /* set flex on the parent */
}

.row .col-md-4 {
    order:2;     /* set default order to be same so they keep their original order */
}

.row .col-md-4.current {
    order:1;       /* make current a lower order so it goes to the front */
}

<div class="row">
    <div class="col-md-4">1 more html</div>
    <div class="col-md-4">2 more html </div>
    <div class="col-md-4 current">3 more html </div>
    <div class="col-md-4">4 more html </div>
</div>

Answer 2

有很多方法可以使用jQuery的DOM操作选择器来实现这一点，但是简单的单线程是：

$('div.current').insertBefore('div.col-md-4:first')

$('div.current').insertBefore('div.col-md-4:first');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-4"> more html</div>
    <div class="col-md-4"> more html </div>
    <div class="col-md-4 current"> more html</div>
    <div class="col-md-4"> more html </div>
</div>

Answer 3

<div style="display: flex">
  <div style="order: 99">First</div>
  <div style="order: 1">Second</div>
</div>

这将导致[Second, First]订单。如果您想更改订单，只需使用JavaScript更改element.style.order = xx即可。

有一个很好的guide on Flex from css-tricks。

Answer 4

使用纯CSS，您可以将该特定div与其余部分放在不同的方向上。我创造了一个你可以遵循的小提琴。

https://jsfiddle.net/w6hhqxvq

.row{
   width: 100%;
}
.col-md-4{
width: 25%;
height: 200px;
background: yellow;
float: right;
}

.col-md-4.current{
float: left;
background: blue;
}

在div组之前放置一个具有特定类的类

4 个答案: