不同顺序的列

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

您需要在 %

中定义宽度

columns{
width:25%;
}

Answer 2

您得到的顺序是正确的... 该列是垂直呈现的，当它达到 4 时，4 会移到一边...

1   4   7
2   5   8
3   6   9

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

在这里试试：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_columns

您有 9 个元素... 9 个要放置在 4 列中 table... 但由于它是从上到右填充的，因此网格 ID 的最后一列为空。

Answer 3

解决方案如Sharma所说，你必须定义一个宽度。

无论如何，我强烈建议尝试使用 Flexbox 布局。它非常适合这类场景。使用 Felxbox，您可以通过一个简单的声明来更改元素的旋转。尝试在 flex-flow 中使用列而不是行，你会明白我的意思。（Prolly 需要更多改动才能使其与您的第一个示例相似）

我已经完成了一些小片段，只是我使用了 flexbox 而不是 block。

columns{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  width: 600px;
  margin: 0 auto;
  background: blue;        
}

div{
  width: 200px;
  background: pink;
}

可以玩here.

Answer 4

仅当元素具有相同高度时有效 不是 OP 指出的情况。

您不需要为此使用 -webkit-columns。你可以做类似

* {
    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>

不同顺序的列

Columns in different order

javascript

css

multiple-columns