html - 如何在 Laravel 5.6 中垂直显示变量数据？

Question

使用 Laravel 5.6，在我的应用程序中，我有一个 div 框来显示可变数据。目前它像这样水平显示， div tag data showing

这是我的div标签，

<div style="border-style: solid; color: black; ">
                            <img src="/images/{{ $upload->resized_name }}" height="150" width="250"></a>
                        {{ Carbon\Carbon::parse($vehicule->created_at)->diffForHumans()}} 
                            {{$vehicule->provincename}}
                          {{$vehicule->milage}}
                          </div>

但我需要在此 div 标记中垂直显示此数据。我怎样才能做到这一点？

Answer 1

首先可以在父容器上使用display:flex将内容水平放置。然后将变量用无序列表ul包裹起来，使它们成为li 元素。

请注意，我将 ul 包裹在 div

中

.container {
  display: flex;
}

/* Just for the demo */
ul { 
  list-style: none;
}

<div class="container">
  <img src="https://fillmurray.com/150/170"/>
  <div class="data-container">
    <ul>
      <li>Province name variable</li>
      <li>Milage variable</li>
    </ul>
  </div>
</div>