时间戳

首页 > 解决方案 > 使用具有响应性的柔性显示器制作 img 的 foreach

php - 使用具有响应性的柔性显示器制作 img 的 foreach

问题描述

我需要用一组图像制作照片布局。但我想做的是让 2 个小的 img 和 1 个大的并排在一起。有一次需要把大的放在下一个“行”上，我希望它放在右侧。（见草图）

问题是我不知道从哪里开始。到目前为止我得到了这个，但不知道如何在只有图像的 foreach 中格式化它。

<div class="w-full flex flex-wrap -mx-2">
    <div class="small-images w-1/3 px-2 ">
        <div class="bg-gray-200 ">r</div>
        <div class="bg-gray-200 mt-4">r</div>
    </div>
    <div class="large w-2/3 px-2 bg-gray-200">r</div>
</div>

<div class="w-full flex mt-4 flex-wrap -mx-2">
    <div class="large w-2/3 px-2 bg-gray-200">r</div>
    <div class="small-images w-1/3 px-2 ">
        <div class="bg-gray-200 ">r</div>
        <div class="bg-gray-200 mt-4">r</div>
    </div>
</div>

我正在使用Tailwindcss并尝试使用网格来实现，但遗憾的是我们还需要支持 IE 11，因此网格在缺乏支持的情况下无法实现。

我想知道这是否可以使用 Flex 盒子？

我正在使用带有 Blade 和tailwindcss的Laravel项目。任何建议或提示都会有所帮助，谢谢，如果有不清楚的地方请告诉我，以便我可以尝试更好地解释它:)

布局

标签： phplaravel-bladetailwind-css

解决方案

对于将来会寻找这个的任何人——使用网格而不是 flexbox 来完成类似的任务。

使用 flex 代替网格

让我们从您不需要为左侧和右侧元素分别编写代码这一事实开始。Flex 具有flex-direction选项，因此您可以在循环中反转顺序。在 Tailwind 中，它是flex-row-reverse类 ( docs )。

在 Laravel Blade foreach（或任何其他 PHP foreach）中，您只需将结果按 3 个元素分块。只需将 eloquent 结果转换为数组并使用 php 的内置函数array_chunk。

@foreach (array_chunk($collection->toArray(), 3) as $chunk)
    <div class="w-full flex flex-wrap -mx-2 mb-2 @if($loop->even) flex-row-reverse @endif">
        <div class="small-images w-1/3 px-2 ">
            <div class="bg-gray-200 ">{{ array_get($chunk, '0.title') }}</div>
            <div class="bg-gray-200 mt-4">{{ array_get($chunk, '1.title') }}</div>
        </div>
        <div class="large w-2/3 px-2 bg-gray-200">{{ array_get($chunk, '2.title') }}</div>
    </div>
@endforeach

在 Laravel 7 上，你将不得不使用 Arr::get 而不是 array_get 或安装助手。

您没有提供任何 PHP 代码，所以我不知道您如何在模型中存储图像。在我的示例中，我将使用文本，但对于图像，您只需按照需要的方式将 img 放在那里。

如果您需要在循环内使用模型方法（例如，如果您有$model->getThumbnail('medium')），那么您不能像我一样将所有结果转换为数组。而是使用收集方法chunk(3)和内部循环使用slice(0, 1)获取正确的项目。

推荐阅读