css - 初始化时砌体网格损坏的布局

Question

我正在使用砌体网格来进行图像布局，如下所示：

第一行 - 两张图片 50/50%

第二行 - 三幅图像 33.33/33.33/33.33%

第三行 - 两张图片 50/50%

在通过 CSS 初始化和设置样式之前，布局工作得很好。初始化后，无论是否加载图像，它都会破坏布局。

    .grid-sizer,
    .grid-item {
        width: 33.33%;
    }

如果我将以上更改为 25%，则三列图像很好地排列在一起，为第四张图像留出空间。50% 宽度的图像相应地移动到顶部和底部。

如果我删除 50% 的两个项目，只留下 33.33% 的项目，它们似乎很好地排成一排。

是不是不可能有这种布局？我让许多其他人轻松工作。

score 1 · Accepted Answer

我弄清楚我的问题是什么。当使用百分比时，我没有意识到每个网格项必须被列宽整除。

改变：

    .grid-sizer,
    .grid-item {
        width: 33.33%;
    }

至

.grid-sizer {
   width: 16.667%;
 }
.grid-item {
    width: 33.33%;
}

解决了我的问题。

1 回答 1