在列表信息切换后，浮动列表保持顺序

Question

点击后切换更多信息，浮动顺序正在制动。任何想法如何保持订单不变？

如果需要，也可以使用类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;
}

小提琴：http://jsfiddle.net/61ab2g6w/1/

Answer 2

试试这个CSS：

＆＃13;

＆＃13;

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;
  clear: left;
}
.employee.even {
  clear: right;
}
div {
  display: none;
}
@media only screen and (max-width: 767px) {
  .employee {
    float: none;
  }
}

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。