html 列div,html – 强制div到下一列

我正在使用列计数创建图像网格.使用列的问题是,就像文本一样,甚至图像也会被破坏.因此,图像的上半部分可以在一列中,下半部分可以在第二列中.我通过将display：inline-block添加到列中的项目来解决这个问题.这让我遇到了目前的问题：

如果列数为3且有7个项目,则项目显示为[3] [3] [1].

[item] [item] [item]

[item] [item]

[item] [item]

我希望这些项目显示为[3] [2] [2].所以问题是：我可以将其中一个div强制到下一列吗？

HTML

CSS

#container {

column-count: 3;

-moz-column-count: 3;

-webkit-column-count: 3;

width: 100%;

}

.item {

background: red;

/*-webkit-column-break-inside: avoid;

-moz-column-break-inside:avoid;

-moz-page-break-inside:avoid;

page-break-inside: avoid;*/

display: inline-block;

height: 250px;

margin-bottom: 20px;

width: 100%;

}

被注释掉的部分是防止图像中断的第二种方式,但它比简单的显示更少支持：内联块.它完全一样.

我试着改变身高并使用清晰.

更新

根据要求,提供一些背景信息/用例.

图像网格将用于餐馆的简单网站.它将在具有两种不同功能的多个页面上使用.功能一位于首页,其中八个图像(纵向或横向格式)将用作指向不同页面的链接. (8个图像得到正确分割[3] [3] [2])图像网格的第二个功能是,作为图像网格.例如,餐厅历史悠久,可以追溯到近100年.可能会在此过程中添加更多图像.使用列数而不是三个div可以更轻松地添加图像,并且可以非常轻松地进行响应.问题是,对于一定数量的图像,如7,图像不会在列上正确分割.

更新2

我尝试使用砌体框架,但工作缓慢.