css - float 容器与底部 div 重叠，但不与顶部重叠

Question

嘿，我对这个结构有点不确定。本质上我想要一个有 4 个 div。

<div class="container">
    <div class="top-border"></div>
    <div class="box"></div>
    <div class="bottom-border"></div>
</div>

容器包含三个较小的 div。我的目标是让框 div 包含内容，而边框 div 在框周围创建一个括号。 border-top 会向左浮动，border-bottom 会向右浮动。唯一的问题是容器与底部支架重叠，而不是顶部。我也不希望它重叠...有没有办法解决这个问题？

这是一个 JsFiddle:http://jsfiddle.net/6ghzN/

Answer 1

在底部边框 div 上，更改

margin-top: -40px;

到

margin-bottom: -8px;