我正在尝试通过 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 %>
我想对其进行设置,以便用户照片显示在姓名、城市和国家/地区上方,下一个用户显示在旁边等等。编辑和删除将通过管理员过滤器显示。我在需要的地方添加了一些休息时间。我尝试了各种 float 、相对位置等,但似乎无法正常工作……有什么想法吗?
非常感谢!
最佳答案
您可以使用 Bootstrap或您需要的任何其他网格框架。
我已经使用 bootstrap 演示了您想要的布局。希望这有帮助
<div class="container">
<div class="row">
<div class="span2">
...
</div>
<div class="span2">
...
</div>
</div>
</div>
参见 Fiddle
更新:
参见 Fiddle
您只需为框指定一个宽度并将其 float ,以便它显示在网格布局中。
.box {
width: 140px;
float: left;
background: #f5f5f5;
border: 1px solid #e1e1e1;
padding: 2px;
border-radius: 3px;
margin: 10px 5px 5px 10px;
}
关于css - rails : Displaying Users on Index Page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16595594/