Question

我有浮动的元素，宽度= 20％（每行5个元素）。

看起来像这样：

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

我现在想要的是＆＃34;排序＆＃34;他们垂直。这看起来像这样：

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

我无法想出存档的方法。

这仅适用于CSS，还是需要PHP或JS来存档？

Answer 1

您可以使用CSS3 multiple column布局。

＆＃13;

.container {
  width: 100px;
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
}

＆＃13;

<div class="container">
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
</div>

＆＃13;

或者使用CSS3 flexbox来执行此操作。

＆＃13;

.container {
  width: 100px;
  height: 60px; /*20x3*/
  display: flex;
  flex-flow: column wrap;
}
.container span {
  flex: 0 0 20px;
}

＆＃13;

<div class="container">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span>
</div>

＆＃13;

如何浮动和垂直排序元素？

1 个答案: