3

嘿，我对这个结构有点不确定。基本上我想要一个有 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/

4

4 回答 4

5

在底部边框 div 上，更改

margin-top: -40px;

至

margin-bottom: -8px;
于 2013-06-11T18:29:41.413 回答
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/

于 2013-06-11T18:35:24.370 回答
1

I had success using this method:

1) Remove background color from .container and add it to .box.

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

2) Add a negative margin to the right of .top-border so that .box floats correctly:

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

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

于 2013-06-11T18:32:02.683 回答
0

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

jsfiddle

于 2013-06-11T18:29:57.953 回答