删除网格中图像上方/下方的空白

Question

我正在尝试生成具有固定列宽（例如三列）且具有可变大小的未固定高度的图像网格。我正在使用beaver-builder插件，并使用我想坚持使用的Posts模块。问题在于图像在图像下方/上方具有空格，如下所示： 我希望图像像这样聚在一起的地方：

我一直在搞弄样式，似乎每个图像都在固定高度的框内。这是每个图像的网格和边界框的html，突出显示的行是包含图像的div。

如果您有任何想法，请告诉我。谢谢。

Answer 1

使用column-count：

class A(Model):
    a_id = Column(Integer, primary_key=True)
    a_name = Column(String(100), unique=False, nullable=True)
    .... other fields

class B(Model):
    a_id=Column(Integer,ForeignKey("A.a_id"), nullable=False)
    a = relationship("A")
   .... other fields

示例：

#blocks {
    column-count: 3;
    column-gap: 0px;
}
.block {
  page-break-inside: avoid;
  break-inside: avoid-column;  
  width: 100%;
  height: 100px; // can be different heights
}

#blocks {
	column-count: 3;
    column-gap: 0px;
}
.block {
  background:red;
  page-break-inside: avoid;
  break-inside: avoid-column;  
  width: 100%;
  border: 1px solid black;
  height: 100px;
}
.block:nth-child(even) {
  background: blue;
}
.block:nth-child(1) {
  height:50px;
}
.block:nth-child(2) {
  height:200px;
}
.block:nth-child(3) {
  height:150px;
}
.block:nth-child(4) {
  height:30px;
}