Question

我有这个，我想要一个像红色指示的空间。我使用bootstrap。

编辑：我想要这样的example，它总是与顶部和底部的其他列具有相同的边距，独立于列的高度，因为所有列都具有不同的高度，因为照片或描述。< / p>

Answer 1

这有点粗糙，很难解释。我在JSFiddle here中完成了它。

CSS

 if(PriceSelectionsResponseRootObject.Response.PriceSelectionsResponse.Prompts.prompt.Any(p => p.level == "WARN") && PriceSelectionsResponseRootObject.Response.PriceSelectionsResponse.Prompts.prompt.Where(p=>p.message.contains("Hopper")) {

    }

HTML

    .container {
  column-width: 100px;
  column-gap: 5px;
  border: 1px solid red;
  margin: 5px auto;
}

#card {
  padding: 10px 5px;
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
  column-break-inside: avoid;
  background: white;
  margin: 0 2px 15px;
}

我可以告诉你的是，关键在于列宽，列间隙，最重要的是，你需要确保将卡片的margin-top设置为0以便它们浮动到目前为止尽可能顶。您可以使用它来获得不同的结果。祝你好运。

Answer 2

我怀疑是否可以通过CSS。查看这个完全符合您要求的javaScript插件。 JavaScript Masonry

如果列的高度不同，如何在顶部和底部的列之间放置相同的边距

2 个答案: