html - 将 Div 移动到一列的右侧和另一列的下方

Question

我是 HTML/CSS 的新手。我想要包含 <p> posts </p> 的 div(在下面标记的底部)落在<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来自 Foundation 的类来实现这一点。

其中包含“帖子”的部分将更改为:

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

现在这将与之前的宽度相同 small-9 div，但会有 3 列的偏移量。

Demo

---

编辑

将“帖子”内容作为第一个 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