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
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>