div元素没有并排放置的问题

Question

我在blade.php 中有一个需要显示图像的代码。 理想情况下，图像应该与 div 元素并排堆叠。 但它似乎不起作用。

我试过flex 、 bootstrap和float 。 在 html 元素中使用display 。

 .lightbox img { width: 100%; margin-bottom: 30px; transition: .2s ease-in-out; box-shadow: 0 2px 3px rgba(0, 0, 0, .2); max-height: 198px; display: flex; object-fit: cover; }

 <link rel="stylesheet" href="{{ asset('css/app.css') }}"> @foreach($post as $post) <div class="row pt-5"> <div class="col-sm-6 col-md-4"> <a class="lightbox" href="/storage/{{ $post}}"> <img src="/storage/{{ $post }}" class="w-25"> </a> </div> </div> @endforeach

这是当前视图 - 它显示上下图像

Answer 1

更改@foreach位置可能会有所帮助：

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <div class="row pt-5">
      @foreach($post as $post)
        <div class="col-sm-6 col-md-4">
            <a class="lightbox" href="/storage/{{ $post}}">
                <img src="/storage/{{ $post }}" class="w-25">
            </a>
        </div>
      @endforeach
    </div>