基本的CSS我认为但仍然无法做到 - 试图在另一个div中定位两个div

Question

这项工作已经持续了大约两个小时。我想这样做：

看起来像这样：

这是我的代码。我一直在尝试填充底部，边距底部等，但它只是在问号div（area_help）下面添加像素，按下下面的div，而不是像我希望的那样在your_area中定位area_help。任何帮助，将不胜感激。谢谢！

html / erb文件（这是一个rails应用程序，但不认为这很重要）：

 <div id="your_area">
  <div id = "Address_book_area">
    <% if current_resource.name == @resource.name %>
    <%= "Your Area:" %>
    <% else %>
      <% if @resource.is_company? %>
        <%= "#{@resource.name}" + "'s Area:" %>
      <% else %>
        <%= "#{@resource.first_name.capitalize}" + " " + "#{@resource.last_name.capitalize}" + "'s Area:" %>
      <% end %>
    <% end %>
  </div>


    <div id = "area_help">
      <%= image_tag("why_fb_log_in.png") %>
    </div>
  </div>

的CSS：

#your_area {
margin-top: 100px;
margin-left: 240px;
margin-bottom: 20px;

#Address_book_area {
font-size: 28px;
width: 140px;
float: left;
}

#area_help {
width: 30px;
display: inline-block;
}

}

Answer 1

这看起来像是相对定位合理的情况：

#area_help {
  position: relative; 
  top: -15px
 }

相对定位会移动元素，但保持文档流不变。