不同顺序的列

Question

我正在尝试使用CSS "columns“属性重新创建一种图库布局。

但我遇到了两个问题：

• 列不填充容器，而且由于某种原因，我总是得到n-1列。
• 命令是1-4-7，2-5-8，3-6-9，我要它1-2-3，4-5-6，7-8-9。

对于第二个问题，我认为我可以用javascript重新排序HTML代码中的元素，但是如何确定哪些元素必须移动，哪些元素要移到哪里？

有什么想法吗？

​

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;    
}

columns{
    display: block;
    -webkit-columns: 4;
    -webkit-column-gap: 10px;
    width: 400px;
    margin: 0 auto;
    background: blue;        
}

div{
    background: pink;
    margin-bottom: 10px;
}

#d5{
    height: 43px;
}

<columns>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div id="d5">5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</columns>

​

Answer 1

只有当元素的高度相同时，才能工作，是，而不是，正如OP所指出的那样。

您不需要为此使用-webkit列。你可以做这样的事

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

columns {
    display: block;
    width: 400px;
    margin: 0 auto;
    background: blue;
}
    /* clear fix */
    columns:after {
        content: "";
        display: table;
        clear: both;
    }

/* the float takes care of collapsing white space between elements 
    132 = (400 - 2 x 2 [margins]) / 3 [columns] 
*/
div {
    float: left;
    display: block;
    background: pink;
    width: 132px;
    margin-right: 2px;
}
    /* we don't need right margins for the last column */
    div:nth-of-type(3n) {
        margin-right: 0;
    }

也不需要JavaScript！

​

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    columns {
      display: block;
      width: 400px;
      margin: 0 auto;
      background: blue;
    }
    /* clear fix */
    columns:after {
      content: "";
      display: table;
      clear: both;
    }
    /* the float takes care of collapsing white space between elements 
        132 = (400 - 2 x 2 [margins]) / 3 [columns] 
    */
    div {
      float: left;
      display: block;
      background: pink;
      width: 132px;
      margin-right: 2px;
    }
    /* we don't need right margins for the last column */
    div:nth-of-type(3n) {
      margin-right: 0;
    }

<columns>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</columns>

​

Answer 2

您需要在%中定义宽度

columns{
width:25%;
}

Answer 3

你得到的命令是正确的..。列是垂直呈现的，当它达到4时，4被移到一边.

1   4   7
2   5   8
3   6   9

你缺少的列是空的..。如果你写10div，你就会看到。

试试这里：列

你有9个元素..。9放置在一个4列表中..。但是由于它是从顶部填充到右边的，所以网格id的最后一列为空。