Question

我有两个div，我希望他们看起来像＆＃34;被同一个边界包围。任何人都可以帮我解决这个问题吗？

我希望它看起来像

 _____
|top  |
|     |__
|bottom  |
|        |
 ─────────

PS。我尝试的方法是在``#top` div。

中添加border-bottom : white

然而，它变得更加复杂，因为我需要#bottom div来包含position: absolute，而#top div没有position: absolute。

这是html。

<div id='top'>
   top
</div>
<div id='bottom'>
   bottom
</div>

这是css

#top{
    width : 100px;
    height : 100px;
    border : solid 1px black;
    border-bottom : solid 3px white;
    position : relative;
    z-index : 1000;
}

#bottom{
    width : 200px;
    height : 200px;
    border : solid 1px black;
    position : absolute;
}

如果你需要

，这是jsfiddle

http://jsfiddle.net/willHsu/T3bLq/

感谢您的帮助！

Answer 1

让它们重叠一下。这样的事情：http://jsfiddle.net/T3bLq/2/

.box {
position: relative;
}

#top{
width : 100px;
height : 100px;
border : solid 1px black;
border-bottom : solid 3px white;
position : absolute;
z-index : 1000;
}

#bottom{
top: 102px;
width : 200px;
height : 200px;
border : solid 1px black;
position : absolute;
}


<div class="box">
<div id='top'>
    top
</div>
<div id='bottom'>
    bottom
</div>

Answer 2

根据Milkmannetje的解决方案，你可以给底部div一个100像素的上边距而不是绝对位置。
由于边缘折叠，最上面的一个最终与底部相同，所以我不得不将顶部向上移动100个像素。

#top{
    width : 100px;
    height : 100px;
    border : solid 1px black;
    border-bottom : none;
    position : absolute;
    top:-100px;
    background:#FFF;
}

#bottom{
    width : 200px;
    height : 200px;
    border : solid 1px black;
    margin-top:108px;
}

http://jsfiddle.net/MrLister/T3bLq/4/

或者，如果你根本不想使用position: absolute，你可以给出前一个display:relative（因为这只是为了在Z-index中将它放得更高）和使用margin-top: -1px作为底部。

http://jsfiddle.net/MrLister/T3bLq/7/

或者，另一种方法，如果你想完全避免position，就是在源代码中切换div。这也将使顶部显示在底部之上，而不依赖于Z-index。然后给底部一个大的上边距，顶部一个大的负上边距让它们再次回到屏幕上的相同位置。

http://jsfiddle.net/MrLister/T3bLq/8/

我不建议采取这种做法;这令人困惑。使用这样的东西只是作为最后的手段。

Answer 3

另一个解决方案，在选择器之前尝试：

#top {
    width : 100px;
    height : 100px;
    border : solid 1px black;
    border-bottom : none;
    background:#FFF;
}
#bottom {
    width: 200px;
    height: 200px;
    border: solid 1px black;
    border-top: none;
}
#bottom:before{
    content: "";
    display:block;
    margin-left: 100px;
    border-top: solid 1px black;
}

http://jsfiddle.net/sagix/vTyeS/

省略两个div之间的边界

3 个答案: