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

Here is current view-it show up and down images

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>

div元素不能并排放置的问题

1 个答案: