Question

我需要每3列以正确的顺序显示，并为每个额外的html列表元素启用自动宽度。

这是我的例子：

<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>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

我想像这样转换输出：

1 4 7 10
2 5 8 11
3 6 9 12

这是我到目前为止所尝试的，并且在其他所有浏览器上都能正常运行但与Safari浏览器不兼容。

ul {
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 150px;
  width: auto;
}

li {
  float: left;
  display: inline-block;
  list-style: none;
  position: relative;
  height: 50px;
  width: 50px;
}

是他们产生输出的另一种方法吗？对于只是safari浏览器，或者是他们的替代方式与css，js / jquery或perhapes一些PHP过滤器循环html到列表变量/数组

使用jquery修补此问题的最接近的示例是模仿flex-wrap：使用以下代码进行修改：

<style>
#wrap{float:left; width:50px; height:150px; clear: both;}
</style>
<script>
$("ul > :lt(3)").wrapAll( "<ul id='wrape'></ul>" ); 
</script>

然而，我似乎无法找到一种方法来继续每3个列表重复一次。

重要的是我让它在Safari浏览器中运行到目前为止我似乎无法解决这个问题，我会提供任何帮助：）

测试链接： http://jsfiddle.net/rafcastro77/3zd7yspg/59/

我终于设法修补它，这是我工作的例子：

   <style>
.new{float:left; width:50px; border:1px solid #000; color:green; }
</style>
<script>
   var divs = $("ul > li");
    for(var i = 0; i < divs.length; i+=3) {
      divs.slice(i, i+3).wrapAll("<div class='new'></div>");
    }
</script>

带输出的工作版本： http://jsfiddle.net/rafcastro77/3zd7yspg/66/

我希望如果他们正在寻找替代方式而不是flexbox

，这可以帮助许多其他人

在除Safari之外的所有浏览器上工作的Flexbox代码是他们的替代品还是补丁？

0 个答案: