使用Rails 7和Taildwincss将图片和卡片彼此放置

发布于 2025-01-28 08:17:47 字数 1333 浏览 1 评论 0原文

我正在尝试实现以下设计，使用Rails 7与TailWindCSS：

我是Taildwincss的新手，我意识到有很多方法可以实现此设计。但是我无法完全复制它。这是我在视图中使用的代码：

<div class="grid gap-1 grid-cols-12 grid-rows-1">
  <% @user.each do |user| %>
    <% if user.photo? %>
      <div class="p-5 col-span-2">
        <div class="bg-white p-5 rounded-lg shadow-lg">
          <%= image_tag "user_photo.png", width: 100 %>
        </div>
      </div>
    <% else %>
      <%# ToDo: %>
      <%# image_tag user.photo, width: 100 %>
    <% end %>
    <div class="p-5 col-span-10">
      <div class="bg-white p-5 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold mb-2 text-gray-800"><%= user.name %></h2>
        <p class="text-gray-700 text-right">Number of posts: <%= user.posts.count %></p>
      </div>
    </div>
  <%end%>
</div>

这就是结果：

我可以更改什么以使其更靠近线框？

原文

I'm trying to implement the following design, using Rails 7 with Tailwindcss:

I'm new to Taildwincss and I realize there are many ways to achieve this design. However I cannot fully replicate it. This is the code I'm using in my view:

<div class="grid gap-1 grid-cols-12 grid-rows-1">
  <% @user.each do |user| %>
    <% if user.photo? %>
      <div class="p-5 col-span-2">
        <div class="bg-white p-5 rounded-lg shadow-lg">
          <%= image_tag "user_photo.png", width: 100 %>
        </div>
      </div>
    <% else %>
      <%# ToDo: %>
      <%# image_tag user.photo, width: 100 %>
    <% end %>
    <div class="p-5 col-span-10">
      <div class="bg-white p-5 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold mb-2 text-gray-800"><%= user.name %></h2>
        <p class="text-gray-700 text-right">Number of posts: <%= user.posts.count %></p>
      </div>
    </div>
  <%end%>
</div>

And this is the result:

What could I change to get a bit closer to the wireframe?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

秋千易 2025-02-04 08:17:47

将DIV都保留在flex中，并将中心类添加到其中。

请参阅此伪代码

<div class="flex flex-row item-center">
    <div class="bg-white rounded-lg shadow">Image</div>
    <div class="bg-white rounded-lg shadow">
        card
    </div>
</div>

，这是解决方案代码

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row items-center">
  <div class="p-10">
    <div class="rounded-lg bg-gray-200 p-10 shadow-lg">%></div>
  </div>

  <div class="p-5">
    <div class="rounded-lg bg-gray-200 p-5 shadow-lg">
      <h2 class="mb-2 text-2xl font-bold text-gray-800">Lily</h2>
      <p class="ml-28 text-right text-gray-700">Number of posts: 2</p>
    </div>

  </div>
</div>

Keep both the div containing both the image and card in flex and add item-center class to it.

Refer to this pseudo code

<div class="flex flex-row item-center">
    <div class="bg-white rounded-lg shadow">Image</div>
    <div class="bg-white rounded-lg shadow">
        card
    </div>
</div>

And here is the solution code

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row items-center">
  <div class="p-10">
    <div class="rounded-lg bg-gray-200 p-10 shadow-lg">%></div>
  </div>

  <div class="p-5">
    <div class="rounded-lg bg-gray-200 p-5 shadow-lg">
      <h2 class="mb-2 text-2xl font-bold text-gray-800">Lily</h2>
      <p class="ml-28 text-right text-gray-700">Number of posts: 2</p>
    </div>

  </div>
</div>

回复收藏 0 原文

~没有更多了~