html - 请教我如何将php的数据列表按4向右排序

Question

我想在右边画出四个不同的列表。但我不知道如何解决它，因为同一个列表像这样垂直重复。 我想要的形式是
1234
4567
我想要这样的表格。

这是我的 html 代码。

@foreach($penpals as $penpal)
<div class="row">
<div class="col" style="border:1px solid red">
    <table border>
        <tr style="border:1px solid red">
            <td>
                @if($penpal->image != null)
                    <a href="#"><img src="{{ $penpal->image }}" alt="No Image"
                            style="max-width: none; height: 170px; display: inline; " height="170px" width="170px"
                            class="img-thumbnail"></a>
                @else
                    <a href="#"><img src="{{ asset("data/ProjectImages/master/logoImage/6.png") }}" alt="No Image"
                        style="max-width: none; height: 170px; display: inline; " height="170px" width="170px"
                        class="img-thumbnail"></a>
                @endif
            </td>
        </tr>
        <tr class="text-center">
            <td>
                    {{ $penpal->user->name  }}
                    @if($penpal->user->gender == 'men')
                        <img src="{{ asset("data/ProjectImages/master/men.png") }}" alt="men">
                    @else
                        <img src="{{ asset("data/ProjectImages/master/women.png") }}" alt="women">
                    @endif
                    {{ $penpal->user->age  }}
                    @if($penpal->user->country == 'ko')
                        <img src="{{ asset("data/ProjectImages/master/korea.png") }}" alt="men">
                    @else
                        <img src="{{ asset("data/ProjectImages/master/japan.png") }}" alt="women">
                    @endif
            </td>
        </tr>
    </table>
</div>
<div class="col" style="border:1px solid red">

</div>
<div class="col" style="border:1px solid red">
    3 of 3
</div>
<div class="col" style="border:1px solid red">
    4 of 4
</div>
 </div>
@endforeach

我正在旋转迭代并将数据插入剩余的一个 div，但我不知道如何在剩余的三个 div 中按顺序放置数据

Answer 1

您可以使用 laravel 集合 chunk() 方法 ( https://laravel.com/docs/5.8/collections#method-chunk )。

chunk 方法将集合分成多个给定大小的较小集合:

@foreach($penpals->chunk(4) as $penpalsGroup)
    <div class="row">
        @forach($penpalsGroup as $penpal)
            <div class="col" style="border:1px solid red">
                <table border>
                    <tr style="border:1px solid red">
                        <td>
                            @if($penpal->image)
                                <a href="#">
                                    <img 
                                        src="{{ $penpal->image }}" 
                                        alt="No Image"
                                        style="max-width: none; height: 170px; width: 170px; display: inline; " 
                                        class="img-thumbnail" />
                                </a>
                            @else
                                <a href="#">
                                    <img 
                                        src="{{ asset("data/ProjectImages/master/logoImage/6.png") }}" 
                                        alt="No Image"
                                        style="max-width: none; height: 170px; width: 170px; display: inline;" 
                                        class="img-thumbnail" />
                                </a>
                            @endif
                        </td>
                    </tr>
                    <tr class="text-center">
                        <td>
                            {{ $penpal->user->name  }}

                            @if($penpal->user->gender == 'men')
                                <img src="{{ asset("data/ProjectImages/master/men.png") }}" alt="men">
                            @else
                                <img src="{{ asset("data/ProjectImages/master/women.png") }}" alt="women">
                            @endif

                            {{ $penpal->user->age  }}

                            @if($penpal->user->country == 'ko')
                                <img src="{{ asset("data/ProjectImages/master/korea.png") }}" alt="men">
                            @else
                                <img src="{{ asset("data/ProjectImages/master/japan.png") }}" alt="women">
                            @endif
                        </td>
                    </tr>
                </table>
            </div>
        @endforeach
    </div>
@endforeach