能否调整CSS实现博客文章紧密排列，填补排版空白间隙？

预期效果 #

当前非预期效果 #

你要实现的是瀑布流布局，现有inline-block的写法只会按行对齐元素，高度不一致时自然会产生空白区域，修改CSS样式即可实现紧凑填充的效果：

直接替换你<style>标签内的代码：

body {
  /* 可根据实际需求调整列数，也可以配合媒体查询做自适应 */
  column-count: 3;
  column-gap: 10px;
  padding: 0 5px;
}
.my {
  background-color: blue;
  width: 360px;
  padding: 20px;
  margin: 5px 0;
  break-inside: avoid;
}

注意点 #

1. 删掉原来.my类里的display: inline-block属性
2. break-inside: avoid是为了避免单个卡片被拆分到两个不同的列里
3. 如果需要适配不同屏幕尺寸，加媒体查询调整column-count数值即可，比如小于1200px时设为2列，小于768px时设为1列

内容的提问来源于stack exchange，提问作者fuul