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

Posted 2023-02-26

【中文标题】将 Div 移动到一列的右侧和另一列的下方

【英文标题】：Moving Div to the right of a column and under another column

【发布时间】：2014-01-19 22:44:55

【问题描述】：

我对 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>

【参考方案1】：

您可以使用 Foundation 中的 small-offset-3 类来实现此目的。

其中有“帖子”的部分将更改为：

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

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

Demo

---

编辑

要将“帖子”内容作为第一个small-9 列的一部分，您可以在<div id="events-modal> 的结束</div> 之后添加<p>posts</p>，也可以在<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

【讨论】：

感谢您的帮助。有没有办法让它直接落在 small-9 列内容的下方？它出现在它的下方，但在小 3 列内容结束的页面底部。我几乎在寻找要修复的 small-3 列内容以及其他所有内容都属于 small-9 列

太好了，感谢您提供的非常有用的提示。现在一切都布置妥当了。

好东西，乐于助人。如果您对答案感到满意，可以标记为正确吗？