Yii2 - listView 项目之间的差距

Question

在我的 Sitecontroller actionIndex 中，我有一个 dataProvider 按类别过滤产品，然后将它们显示在 listView 中：

$model = new Produtos();
    $searchModel = new ProdutosSearch();
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

    // get the posts in the current page
    $post = $dataProvider->getModels();

    return $this->render('index',
        ['imagem1' => $imagem1, 'imagem2' => $imagem2,'imagem3' => $imagem3, 'model' => $model, 'searchModel' => $searchModel, 'dataProvider' => $dataProvider]);

在我的站点/index.php 中，我渲染视图以显示产品：

<?php echo $this->render('//produtos/view2', ['model' => $model, 'searchModel' => $searchModel, 'dataProvider' => $dataProvider]); ?>

在我的 produtos/view2 中，我有：

<nobr>
        <?= $form->field($searchModel, 'categoria')->dropDownList(ArrayHelper::map(Categorias::find()->all(), 'categoria','categoria'), ['prompt'=>Yii::t('yii', 'Todos os produtos...')])  ?>
        <?= Html::submitButton(Yii::t('app', 'Pesquisar'), ['class' => 'btn btn-warning']) ?>
    </nobr>

<?= ListView::widget([
        'dataProvider' => $dataProvider,
        'itemView' => '_view2',
        'summary' => '',
    ]); ?>

在我的 produtos/_view2.php 我有：

<?= DetailView::widget([
    'model' => $model,
    'options' => ['class' => 'detail1-galeria-view2'],
    'attributes' => [
        // cria um array com a fotografia, em que carrega a path no campo fieldName da bd
        [
            'attribute'=>'',
            //'value'=>$model->foto,
            'value'=>Html::a(Html::img(Yii::$app->getUrlManager()->getBaseUrl() . "/" .$model->foto, ['width'=>'230', 'height' => "256"]), $model->foto),
            'format' => 'raw',
        ],
        [
        'attribute'=>'',
        'value'=>$model->nome,
        ],
        [
        'attribute'=>'',
        'value'=>$model->categoria,
        ],
        [
        'attribute'=>'',
        'value'=>$model->descricao,
        ],
        [
        'attribute'=>'',
        'value'=>$model->valor.' '.'€',
        ],
        // info
        [
        'attribute'=>'',
        'format' => 'raw',
        // nesta hiperligação passo o valor do model->nome deste registo para encomendas/create
        'value'=> Html::a(Yii::t('app','Comprar'), Url::toRoute(['encomendas/create', 'nome' => $model->nome, 'preco' => $model->valor])),
        ],
    ],
]) ?>

当我按所有产品过滤类别时，所有项目并排显示，但是当我按某些类别（例如衣服）进行过滤时，过滤后的产品的渲染完成了，但在这里和那里都有 GAPS。过滤器删除不属于活动类别的产品和 listView 呈现间隙。

这里是一些空白的屏幕截图：

如何解决？

编辑： 下面的 css 类几乎解决了这个问题：

.detail1-galeria-view2{
margin-bottom:40px;
width: 380px; /* this value fixed almost all gaps for the detailView */
float:left;
color:#201c0e;
font-weight:500;
font-size:12px;
text-align:center;
}

Answer 1

这是样式问题，而不是 php/yii 问题。

在你的 CSS 中：

.clearfix {
    clear: both;
}

在_view2.php 文件的顶部添加以下代码

<?php
if ($index + 1 % 4 == 0 && $index !== 0) {
    echo '<span class="clearfix"></span>
}
?>

这应该在每 4 个项目之后注入一个 span 标签（更改它以匹配您想要的列数。

span 使用 css clear 命令重置浮动位置。

编辑：基于 cmets

您可能需要调整 CSS 以有效清除浮动。

尝试将其添加到您的 css 中：

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both; 
}

您可能需要进一步调整 CSS，因为它特定于您的网站。