jquery - 切换列表信息后 float 列表保持顺序

Question

点击切换更多信息后， float 订单正在制动。有什么想法如何保持订单原样吗？

如果需要，还可以使用类even，我已经尝试过使用float:right;在那一个上，但没有成功。

在这里摆弄:http://jsfiddle.net/61ab2g6w/

<ul class="employee-wrap">
    <li class="employee">1<div>Lorem ipsum dolor sit amet</div></li>
    <li class="employee even">2<div>Lorem ipsum dolor sit amet</div></li>
    <li class="employee">3<div>Lorem ipsum dolor sit amet</div></li>
    <li class="employee even">4<div>Lorem ipsum dolor sit amet</div></li>
    <li class="employee">5<div>Lorem ipsum dolor sit amet</div></li>
    <li class="employee even">6<div>Lorem ipsum dolor sit amet</div></li>
    <li class="employee">7<div>Lorem ipsum dolor sit amet</div></li>
</ul>

ul, li {
    list-style:none;
    margin:0;padding:0;
}
.employee-wrap {
    width:260px;
}
.employee {
    width:100px;
    float:left;
    padding:10px;
    background-color:orange;
    margin:5px;
}
div {
    display:none;
}
@media only screen and (max-width: 767px) {
    .employee {
        float:none;
    }
}

正确的顺序

这里“3”的位置错误。它应该保持在“1”以下

Answer 1

您可以使用此设置:

.employee {
    width:100px;
    display: inline-block;
    padding:10px;
    background-color:orange;
    margin:5px;
    box-sizing: border-box;
    vertical-align: top;
}

fiddle :http://jsfiddle.net/61ab2g6w/1/