CSS列剪切图像的一部分

如果你看一下镀铬的关岛国旗，它是从顶部切断的。它分布在第一列和第二列之间。这是我不想要的。如何使所有列的顶部对齐？我试过使用

分页符inside:avoid

，但这似乎没有帮助

---

有人能帮忙吗？

你很接近，只需添加一个webkit前缀：

-webkit-column-break-inside: avoid;

---

我的Chrome至少需要Windows版本77.0.3865.120（官方版本）（64位）。

使用

对齐项目：居中或
对齐项目：柔性端flex
项目上的code>

或

更改决定创建CSS列布局的容器的结构。这对孩子们的身高没有多大影响。恰恰相反。
参考引导，容器上需要以下CSS：

/*columns: 300px 4;*/
/* margin: 20vh 5% 5%; */
margin-top: calc(50px + 4%); // 50px height of the input + 2% top margin + 2% bottom margin
margin-left: 5%;
margin-right: 5%;
display: flex;
flex-flow: row wrap;

在这种情况下，子项将作为弹性项对齐。对于列布局，您需要
flex basis
属性

display: flex;
flex: 1 0 30%; // flex-basis 30% for 3 colums per row (33.33% - 15px - 15px)
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;