menu

Questions & Answers

How To Set Image In Foreach Side By Side

How make the images in this looping condition appear side by side

Below is my source code

                       @foreach ($dataLevelTiga as $keyTiga => $itemTiga)
                            @if ($itemTiga->opsi_jawaban != 'option')
                                @php
                                    $dataDetailJawabanText = \App\Models\JawabanTextModel::select('jawaban_text.id', 'jawaban_text.id_pengajuan', 'jawaban_text.id_jawaban', 'jawaban_text.opsi_text', 'item.id as id_item', 'item.nama')
                                        ->join('item', 'jawaban_text.id_jawaban', 'item.id')
                                        ->where('jawaban_text.id_pengajuan', $dataUmum->id)
                                        ->where('jawaban_text.id_jawaban', $itemTiga->id)
                                        ->get();
                                @endphp
                                @foreach ($dataDetailJawabanText as $itemTextTiga)
                                    @if ($itemTextTiga->nama != 'Ratio Tenor Asuransi')                                               
                                            @if ($itemTiga->opsi_jawaban == 'file')
                                                    <div class="form-group col-md-6 mb-0">
                                                        <label for="">{{ $itemTextTiga->nama }}</label>
                                                    </div>
                                                    <div class="col-md-6 form-group">
                                                        <b>Jawaban: </b>
                                                        <div class="mt-2">
                                                            @php
                                                                $file_parts = pathinfo(asset('..') . '/upload/' . $dataUmum->id . '/' . $itemTiga->id . '/' . $itemTextTiga->opsi_text);
                                                            @endphp
                                                            @if ($file_parts['extension'] == 'pdf')
                                                                <iframe src="{{ asset('..') . '/upload/' . $dataUmum->id . '/' . $itemTiga->id . '/' . $itemTextTiga->opsi_text }}" width="100%" height="300px"></iframe>
                                                            @else
                                                                <img src="{{ asset('..') . '/upload/' . $dataUmum->id . '/' . $itemTiga->id . '/' . $itemTextTiga->opsi_text }}" alt="" width="300px">
                                                            @endif
                                                        </div>
                                                    </div>         
                                            @endif
                                    @endif
                                @endforeach
                            @endif
                        @endforeach

The source code above if it will be like this

There is my image

I want to change side by side, any solution ?

Comments:
2023-01-21 23:30:09
What do you want to happen if the images overfill the width available?
Answers(1) :

try this and tell me what happened:

<div class="image-container">
  @foreach ($dataDetailJawabanText as $itemTextTiga)
    <img class="image" src="{{ asset('..') . '/upload/' . $dataUmum->id . '/' . $itemTiga->id . '/' . $itemTextTiga->opsi_text }}" alt="" width="300px">
  @endforeach
</div>

<style>
  .image-container {
    overflow: auto;
  }

  .image {
    float: left;
    margin-right: 10px;
  }
</style>