laravel 如何将图像设置为前后并排

piah890a  于 2023-01-21  发布在  其他
关注(0)|答案(1)|浏览(89)

如何使这种循环条件下的图像并排显示
下面是我的源代码

@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

上面的源代码如果会是这样的

我想并肩而变,有办法吗?

2g32fytz

2g32fytz1#

试试这个告诉我发生了什么

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

相关问题