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 に答える