Question

我尝试使用CSS＆＃34;列＆＃34;重新创建一种类型的图库布局。属性。

但我遇到了两个问题：

列不会填充容器，出于某种原因我总是会得到n-1列
订单是1-4-7,2-5-8,3-6-9，我想要1-2-3,4-5-6,7-8-9

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

有什么想法吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要在％

中定义宽度

Orders = new Mongo.Collection('orders', {
  connection: Meteor.remote
});

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放在一个4columns表中......但是因为它从上到下填充了网格id的最后一列为空。

Answer 3

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

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

我已经完成了一些小片段，我只使用了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。

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>

列以不同的顺序

4 个答案: