不同顺序的列

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

Answer 2

你需要在%中定义宽度

columns{
width:25%;
}

Answer 3

你得到的顺序是正确的...... 该列垂直渲染，当它达到 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 列的表中...但是由于它是从上到右填充的，因此网格 ID 的最后一列是空的。

Answer 4

解决方案正如夏尔马所说，你必须定义一个宽度。

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

我做了一点 sn-p 只是我使用了 flexbox 而不是块。

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。