调整列表以遵循自然流程

Question

我在像

这样的容器中有一个普通的ul>li列表

<div class='conatiner'>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
 </ul>
</div>

现在我希望调整流程，如下图所示。不确定它是否可能。 Here is a fiddle

Answer 1

试试这个：

$(document).ready(function(){
  var lis = $("ul > li");
  for(var i = 3; i < lis.length; i+=6) {
    lis.slice(i, i+3).wrapAll("<div class='y'></div>");
  }
})

.conatiner {
  width: 250px;
  background: #CCC;
  padding: 10px;
}

.conatiner:after {
  content: '';
  clear: both;
  display: block; 
}

ul {
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
}

li {
  display: inline-block;
  width: calc(250px/3);
  margin-bottom: 5px;
  float: left;
}

.y li {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class='conatiner'>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
</div>

Answer 2

如果没有使用<ul>属性和大量硬编码行的css hacks，则只能使用一个order进行此操作。

但是有两种不同的简单替代品！

第一个 - 使用多个<ul>！一个<ul>包含最多3个<li>（或者您想要连续多少个）。

* {
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  list-style: none;
}

ul:nth-of-type(even) {
  flex-direction: row-reverse;
}

li {
  flex: 1;
  height: 30px;
  border: 1px solid yellow;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<ul>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<ul>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

您设置了一个ul-reverted和一个non-reverted类。两者都显示flex。恢复的列表样式是惊喜 - 行 - 还原。

备选方案2与<div>容器的结构相同。以同样的方式工作！