0

我正在尝试通过 CSS 在我的项目中设置用户索引页面的样式，以便用户照片和文本在用户注册并添加到数据库时以“网格”方式显示。我的 users/index.html.erb 下面：

<%= link_to user do %>
   <%= image_tag user.photo.url(:small) %>
<% end %><br />

<%= user.first_name %>
<%= user.last_name %><br />
<%= user.city %><br />
<%= user.country %><br /><br />

<% if current_user and current_user.admin %>
  <%= link_to image_tag("edit.png", {:alt => 'Edit User'}), edit_user_path(user), :method => :get %>
  <%= link_to image_tag("delete.png", {:alt => 'Delete User'}), user, method: :delete, data: { confirm: 'Are you sure you want to delete this User?' } %><br /><br />
<% end %>

我想进行设置，以便用户照片出现在名称、城市和国家/地区上方，下一个用户出现在旁边等。编辑和删除将通过管理员过滤器显示。我在需要的地方添加了一些休息时间。我已经尝试过浮动、相对位置等的变体，但似乎无法让它工作......有什么想法吗？

非常感谢！

4

1 回答 1

1

您可以根据需要使用Bootstrap或任何其他网格框架。

我已经使用引导程序来演示您想要的布局。希望这可以帮助

<div class="container">
  <div class="row">
    <div class="span2">
     ...
    </div>
    <div class="span2">
     ...
    </div>
  </div>
</div>

见小提琴

更新：

见小提琴

您所需要的只是为框指定宽度并使其浮动，以便它显示在网格布局中。

.box {
  width: 140px;
  float: left;
  background: #f5f5f5;
  border: 1px solid #e1e1e1;
  padding: 2px;
  border-radius: 3px;
  margin: 10px 5px 5px 10px;
}
于 2013-05-16T19:45:53.850 回答