Пожалуйста, научите меня, как сортировать список данных 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.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
39
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете использовать метод сбора 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

Я думаю, что ваша проблема заключается в попытке решить вашу проблему с помощью таблицы, а не css или бутстрапа, если вы используете бутстрап, я думаю, да, вы можете сделать что-то вроде этого:

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

Он должен работать.

Другие вопросы по теме