Question

嘿，我对这个结构有点不确定。基本上我想拥有4个div。

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

容器装有三个较小的div。我的目标是让盒子div保持内容，并且边框divs在盒子周围创建一个括号。边框顶部将浮动到左侧，边框底部将浮动到右侧。唯一的问题是容器与底部支架重叠，但不与顶部重叠。我也不希望它重叠......有没有办法解决这个问题？

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

Answer 1

在底部边框div上，更改

margin-top: -40px;

到

margin-bottom: -8px;

Answer 2

我会采用不同的方式，

只需添加.box:before和.box:after

即可

这样，你没有标记所有额外的div！

.container{
    background:#dedede;
    width:80%;
    height:auto;
    float:left;
}
.box{
    height:800px;
    width:100%;
    color:#cecece;
    float:left; 
    position:relative;
}
.box:before{
    content: "";
    width: 40px;
    height: 40px;
    border-left: 8px solid gray;
    border-top: 8px solid gray;
    position: absolute;
    left: -8px;
    top: -8px;
}
.box:after{
    content: "";
    width: 40px;
    height: 40px;
    border-right: 8px solid gray;
    border-bottom: 8px solid gray;
    position: absolute;
    right: -8px;
    bottom: -8px;
}

http://jsfiddle.net/6ghzN/11/

Answer 3

我使用这种方法取得了成功：

1）从.container中删除背景颜色并将其添加到.box。

.box{
    ...
    background:#dedede;   
}

2）在.top-border的右侧添加一个负边距，以便.box正确浮动：

.top-border{
    ...
    margin-right:-40px;
}

http://jsfiddle.net/6ghzN/2/

Answer 4

将margin-bottom: -10px;添加到底部边框类。

jsfiddle

浮动容器重叠底部div，但不是顶部

4 个答案: