Перемещение Div справа от столбца и под другим столбцом

Question

Я довольно новичок в HTML/CSS. Я бы хотел, чтобы div (внизу нижней разметки), содержащий <p> posts </p>, падал справа от <div class="small-3 columns"> и под <div class="small-9 columns">. Как я могу это сделать? Все, что я пытался не работает ..

<div class="small-3 columns"> 
    <%= image_tag @user.image_url(:thumb) %><br> 
    <h3> <%= @user.first_name %> <%=@user.last_name %> </h3><br> 
    <h4>Personal Info</h4> 
     <strong>Email:</strong><br> <%= @user.email %><br> 
     <% unless @user.date_of_birth.blank? %> 
     <strong>Date of Birth:</strong><br> <%= @user.date_of_birth %> 
     <% end %> <br> 
     <% unless @user.home_town.blank? %> 
     <strong>Home Town:</strong><br> <%= @user.home_town %> 
     <% end %> <br> 
     <% unless @user.current_location.blank? %> 
     <strong>Current Location:</strong><br> <%= @user.current_location %> 
     <% end %><br> 
     <% unless @user.about_me.blank? %> 
     <strong>About Me:</strong><br> <%= @user.about_me %> 
     <% end %><br> 
    </div> 
    <div class="small-9 small-centered columns"> 
    <div> 
     <ul class="left"> 
     <li class="active"><a href="#" data-reveal-id="activitiesModal"><h3>Favorite Activities</h3></a></li> 
     </ul> 
     <ul class="right"> 
     <li class="active"><a href="#" data-reveal-id="eventsModal"><h3>Events I'm Attending</h3></a></li> 
     </ul> 
    </div> 
    <div id="activitiesModal" class="reveal-modal" data-reveal> 
     <h4>Stuff I Like</h4> 
     <ul class="panel callout"> 
     <% @user.activities.each do |activity| %> 
      <li><%= activity.name %></li> 
     <% end %> 
     </ul> 
     <a class="close-reveal-modal">&#215;</a> 
    </div> 
    <div id="eventsModal" class="reveal-modal" data-reveal> 
     <h4> Events I'm Attending </h4> 
     <% @user.events.each do |event| %> 
     <ul class="panel callout radius"> 
      <li>Event: <%= event.activity.name %></li> 
      <li>Start Time: <%= event.start_time.to_s(:format_time) %></li> 
      <li>Location: <%= event.location_name %></li> 
      <li><%= link_to 'View Details', user_event_path(current_user, event) %></li> 
     </ul> 
     <% end %> 
    </div> 
    </div> 
    <div class="row"> 
    <p> posts </p> 
    </div> 
</div> 

Answer 1

Вы можете использовать small-offset-3 класс от Фонда для достижения этой цели.

Та часть, которая имеет «сообщения» в нем будет изменен следующим образом:

<div class="row"> 
    <div class="small-9 small-offset-3 columns"> 
    <p>posts</p> 
    </div> 
</div> 

Это теперь будет иметь такую ​​же ширину, как и предыдущий small-9 DIV, но будет иметь смещение 3 столбцов.

Demo

---

EDIT

Чтобы иметь содержание "сообщений как часть первого small-9 колонки, вы можете просто добавить <p>posts</p> после закрытия </div> из <div id="events-modal> или вы можете вставить строку внутри <div class="small-9 columns">.

<div class="small-9 columns"> 
    ... 
    <div class="row"> 
    <div class="small-12"> 
     <p>posts</p> 
    </div> 
    </div> 
</div> 

Обратите внимание, что ваш класс small-centered вызывает расположение сломать, потому что вы не наиважнейшая, что сосредоточены на более крупные устройства. Я удалил его.

Demo