Question

大家好，这是我的问题（请访问图片链接）：http://dominioestudio.com/example.png

我正在建立一个网站，我无法弄清楚如何用下面的元素填充红色空间（一个进入cian矩形）。

这是来自这些元素的代码（灰色内容）

.post {
  background: #CCC;
  width: 48%;
  margin: 10px 1%;
  float: left;
}

我不能使用绝对位置，因为这个网站的信息每天都会改变（所以我需要每个元素都能够适应/填充空间，而不管其他元素的高度。）

想法？

编辑：有些你要我做个小伙子。这是：http://jsfiddle.net/sirmarcio/bLo5v79v/

Answer 1

你可以发一个jsfiddle吗？

display: inline-block;

也许试一试？

Answer 2

您可以使用css属性：

.item {
  flex-grow: <number>; /* default 0 */
}

这定义了Flex项目在必要时增长的能力。它接受一个无比的值作为一个比例。它规定了项目应占用的Flex容器内可用空间的大小。
如果所有项目的flex-grow设置为1，则每个子项将在容器内设置为相同的大小。如果你给一个孩子一个2的值，那个孩子占用的空间是其他孩子的两倍。
负数无效。
此链接将帮助您了解有关flex属性的更多信息：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

您可以在columns: auto 2;上使用.grid-wrap，在display:inline-block;元素中使用.post：Fiddle

填补空白空间

3 个答案: