Question

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

第1行 - 两张图片50/50％

第2行 - 三张图片33.33 / 33.33 / 33.33％

第3行 - 两张图片50/50％

在初始化和通过CSS进行样式化之前，布局非常有效。初始化后，无论是否加载图像，都会破坏布局。

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

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

如果我以50％的价格删除两件商品并且只留下33.33％的商品，那么它们似乎排成一行很好。

这种布局难道不可能吗？我已经让很多人轻松工作了。

Answer 1

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

更改：

$options = $a->map(function ($row) {
    return [
        'text' => false,
        'value' => $row['id'],
        'templateVars' => [
            // template variables are not going to be escaped, so don't forget to
            // apply it on your own when necessary
            'text1' => h($row['_matchingData']['A']->name),
            'text2' => h($row['_matchingData']['B']->name),
            'text3' => h($row['C']),
        ]
    ];
});

echo $this->Form->input('a._ids', [
    'options' => $options,
    'multiple' => 'checkbox',
    'label' => false,
    'templates' => [
        'checkboxWrapper' => /* ... */,
        'nestingLabel' => /* ... */,
        'inputContainer' => /* ... */,
    ]
]);

到

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

解决了我的问题。

初始化时砌体网格破损布局

1 个答案: