Как сделать так, чтобы мои изображения JQuery Masonry всплыли на верх страницы?

Question

Как сделать так, чтобы мои изображения JQuery Masonry всплыли на верх страницы?

2

Как вы можете видеть, в верхней части моей страницы у меня есть аватар пользователя (изображение профиля), вытащенное влево. У меня также есть столбец всех этих сообщений пользователя в другом столбце справа. Проблема в том, что сообщения не начинаются в верхней части страницы с момента добавления аватара.

Вот мой файл:

<div class="row">

    <div class="col-md-3" 'pull-left'>

      <strong><%= @user.username %></strong> <br>
      <%= image_tag @user.avatar(:thumb) %>
    </div>
    </div>

<div class="col-md-12">
      <div id="things" class="transitions-enabled">

  <% @user.things.each do |thing| %>
    <div class='panel panel default'>
    <div class="box">
      <%= link_to image_tag(thing.image.url(:medium)), thing %>
      <div class='panel-body'>
      <strong><p><%= thing.title %></p></strong>
      <p><%= thing.description %></p>
  By <%= link_to thing.user.username, thing.user %>

  <% if thing.user == current_user %>
    <%= link_to edit_thing_path(thing) do %>
    <span class='glyphicon glyphicon-edit'></span> Edit
  <% end %>
  <%= link_to thing_path(thing), method: :delete, data: { confirm: 'Are you sure?' } do %>
    <span class='glyphicon glyphicon-trash'></span> Delete
  <% end %>
  </div>
  <% end %>
  </div>
</div>
  <% end %>
</div> 
</div>
  </div>
  </div>

редактирует

Обновить

<div class="row">

    <div class="col-md-3 avatar">

      <strong><%= @user.username %></strong> <br>
      <%= image_tag @user.avatar(:thumb) %>
    </div>
    </div>

<div class="col-md-9">
      <div id="things" class="transitions-enabled">

  <% @user.things.each do |thing| %>
    <div class='panel panel default'>
    <div class="box">
      <%= link_to image_tag(thing.image.url(:medium)), thing %>
      <div class='panel-body'>
      <strong><p><%= thing.title %></p></strong>
      <p><%= thing.description %></p>
  By <%= link_to thing.user.username, thing.user %>

      <% if thing.user == current_user %>
        <%= link_to edit_thing_path(thing) do %>
        <span class='glyphicon glyphicon-edit'></span> Edit
      <% end %>
      <%= link_to thing_path(thing), method: :delete, data: { confirm: 'Are you sure?' } do %>
       <span class='glyphicon glyphicon-trash'></span> Delete
       <% end %>
      </div>
      <% end %>
      </div>
    </div>
  <% end %>
</div> 
</div>
  </div>
  </div>

Dylan Richards 30 нояб. 2013, в 19:20

Источник

Теги:

jquery

twitter-bootstrap

ruby-on-rails

ruby

jquery-masonry

1 ответ

Ещё вопросы

Billy Chan · Answer 1 · 2013-11-30T18-18-00.000Z

Вам нужно определить "вещи" и "аватар" в той же row в Bootstrap.

<div class="row">
  <div class="col-md-3 avatar"></div>
  <!-- Reduce it to 9 cols here -->
  <div class="col-md-9">
    <div id="things"></div>
  </div>
</div>

Я не думаю, что вам нужен pull-left, который также имеет синтаксическую ошибку в вашем коде, - должен находиться в пределах одной и той же цитаты с другими классами

Хм ... Это не похоже на работу. Я буду обновлять оригинальный пост с тем, что я изменил. Страница по-прежнему выглядит так же.