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中，但是我不知道如何将数据按剩余的三个除数进行排序

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

Answer 2

我认为您的问题是尝试使用表而不是CSS或引导程序来解决问题，如果您使用的是引导程序，我想是的，您可以执行以下操作：

<div class="row">
    @foreach( $penpals as $penpal )
        <div class="col-3">
            //Content here    
        </div>
    @endforeach
</div>

应该可以。

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

2 个答案: