时间戳

首页 > 解决方案 > 请教我如何将php的数据列表按4排序到右边

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

问题描述

我想在右边画出四个不同的列表。但我不知道如何解决它，因为同一个列表是这样垂直重复的。我想要的表格是
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中

标签： htmlcsslaravelbootstrap-4

解决方案

您可以使用 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

推荐阅读