html - 两个 div 周围的 css 边框

Question

大家好，合并两个 <div> 需要您的帮助边界。这是我想要得到的以及到目前为止我得到的: enter image description here 这就是我想做的enter image description here

有人可以告诉我怎么做吗？如果有帮助，这是我的代码:

样式:

#plink {

    position: relative;
    width: 200px;
    float: left;
}

#open {

    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    width: 200px;
    text-align: center;
    line-height: 50px;

}

#closed {
    border: 1px solid black;
    width: 200px;
    text-align: center;
    line-height: 50px;

}

#closed:hover a {
    display: block;
}


#open:hover a {
    display: block;
}

#pbase {

    border: 1px solid black;
    position:relative;
    width: 600px;
    height: 300px;
    float: left;
}

和 html :

<div id="plink">
<div id="open">My details</div>
<div id="closed"><a href="ads.php">My ads</a></div>
<div id="closed"><a href="fav.php">Favorites</a></div>
</div>
<div id="pbase"></div>  

Answer 1

#plink {
    position: relative;
    width: 200px;
    float: left;
    border-top: 1px solid black;
    border-left: 1px solid black;
}
#open {
    border-bottom: 1px solid black;
    border-right: 1px solid white;
    text-align: center;
    line-height: 50px;
}
#closed {
    border-bottom: 1px solid black;
    width: 200px;
    text-align: center;
    line-height: 50px;
}
#pbase {
    border: 1px solid black;
    position: relative;
    width: 600px;
    height: 300px;
    float: left;
    margin-left: -1px;
    z-index: -1;
}

https://jsfiddle.net/8rrov5hb/

这是通过使用 margin-left: -1px 和 z-index: -1 将#pbase 放在#plink 后面来实现的

div #open 有 border-right: 1px solid white 让它看起来透明 - 只需将其更改为您需要的任何背景颜色