html - CSS 布局失败

Question

所以我试图让这个显示配置文件封面如下：

我的代码如下所示：

<div class="show_cover">
  <%= image_tag @show.cover(:show_cover) %>

  <!-- Mouseover Options-->
  <% if current_user == @host %>
    <div class="options">
      <%= link_to "Edit #{@show.name} Show", edit_show_path, class: "btn btn-embossed btn-danger btn-mini" %>

      <% end %>
    </div>

  <div class="show_cover_info">

    <div class="pull-left">
      <b><%= link_to @show.name, @show %></b><br>
      <small>The Best Show all over the Net</small>
    </div>

    <div class="pull-right">
      <%= link_to root_path,
                  class: "btn btn-embossed btn-mini btn-social-facebook" do %>
        <i class="icon-facebook"></i> | Facebook
      <% end %>

      <%= link_to root_path,
                  class: "btn btn-embossed btn-mini btn-social-twitter" do %>
        <i class="icon-twitter"></i> | Twitter
      <% end %>
    </div>


  </div>

</div>

Css是这样的：

.show_cover {
  position: relative;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.options {
  position:absolute;
  top:10px;
  left:10px;
  display:none;
}

.show_cover:hover

.options {
  display:block;

}

.show_cover_info {
  padding: 10px;
  font-size: 16px;
}

.show_cover_info small {
  position: relative;
  font-size: 12px;
  font-weight: normal;
  word-wrap: break-word;
  color: #888;
}

但我要做的就是：

问题：

边界半径没有围绕标题和社交按钮。看到中间的分界线了吗？那是一个<hr>标签，应该放在整个 Div 的下方，以便将它与下一个会话分开。

我究竟做错了什么 ？

Answer 1

尝试将溢出自动放入包装器

.show_cover {
    overflow: auto;
    position: relative;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
 }