Html 列计数：2个'；当有两个div时不能工作

我有下面的例子，适用于除div数为2以外的所有情况

想要的行为是始终在两列中显示div

.container{
列数：2；
}
.广场{
边框：1px纯黑；
框大小：边框框；
高度：200px；
显示：内联块；
宽度：100%；
}

1.
2.

您将

宽度：100%

放在每个元素上，记住，这些元素与容器相对。因此，它不能容纳两个全宽元素并将它们扩展为两行。删除该行会将它们分为两列。50%是宽度的上限，否则它不能容纳一行中的两个元素。

如果尝试使用css网格，则必须调整容器以允许两列。如果您有无限的正方形，但总是希望它们分成两列，请使用flexbox

柔性箱

网格

.container{
显示：网格；
网格模板柱：1fr 1fr；
}
.广场{
边框：1px纯黑；
框大小：边框框；
高度：200px；
宽度：100%；
}

1.
2.

您可以使用float为2个div编写特定规则：

.container{
列数：2；
保证金：5px；
}
.广场{
边框：1px纯黑；
框大小：边框框；
高度：200px；
显示：内联块；
宽度：100%；
}
.square:第一个孩子：第n个最后一个孩子（2）{
浮动：左；
}

1.
2.
1.
2.
3.

width将采用容器的宽度/2，因为列计数设置为2。您为宽度设置了什么？请使用flexbox示例，这样就不起作用了。我没有我想要的顺序（列顺序）我不理解列顺序部分，这里有一个使用flexbox Copy包装div的代码笔将我的代码粘贴到您的代码笔中（或者只是简单地运行我文章中的代码片段），您将看到我所说的顺序（从上到下）好的，因此您正在寻找两个大致均匀分割的列，但是当只有两个项目时，它没有正确地分割，我现在明白了。。。让我看看为什么这些元素需要

内联块

？因为如果我把它去掉，它似乎也可以用两个元素工作？是的，当只有两个div时，display:block可以完美地工作。但当我有两个以上的时候就不行了！你可以使用我的例子。移除显示，添加

break-inside:avoid

？float的问题在于它是一种非常过时的定位方法。@expressjs123我没有使用float来定位任何东西。我使用浮动触发不同的显示，没有浮动不是过时的。这是一个CSS属性，我们应该在需要时继续使用。

.container {
   display: flex;
   flex-wrap: wrap;
}

.square {
   width: 50%;
}