CSS 如何合并两个div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11190488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to merge two divs
提问by Vasya
I have two divs which should looks like one figure. The problem is with the border of the circular block. See pic. below. css were added below
我有两个 div，它们应该看起来像一个数字。问题在于圆形块的边界。见图。以下。下面添加了 css
#nameWidgeteMain {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
border: 1px solid #dbe0e3;
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
.nameWidgeteCloseArea {
position: absolute;
width: 22px;
height: 31px;
top: 7px;
left: 270px;
background-color: rgb(237,237,237);
color: white;
border: 1px solid #dbe0e3;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
text-align: center;
}
#nameWidgeteCloseTitle {
padding-top: 5px;
left: auto;
font-family: sans-serif;
font-size: 12pt;
color: rgb(158, 158, 158);
}
回答by Max Girkens
Maybe try something like this: http://jsfiddle.net/VNAZA/
也许尝试这样的事情：http: //jsfiddle.net/VNAZA/
Uses two divs: one with just the border, which gets layered under the rectangle and another with the actual content, layering over the rectangle. This way you can also apply css box-shadow to the lower div.
使用两个 div：一个只有边框，在矩形下分层，另一个有实际内容，在矩形上分层。通过这种方式，您还可以将 css box-shadow 应用于较低的 div。
HTML:
HTML：
<div class="container">
<div class="rect"></div>
<div class="round_content">x</div>
<div class="round_border"></div>
</div>
CSS:
CSS：
.container{
position:relative;
width: 50px;
height: 150px;
}
.rect{
position:absolute;
width: 50px;
height: 150px;
background: #eee;
border: 1px solid #000;
z-index: 5;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
.round_content{
position: absolute;
top: 50px;
right: -25px;
width: 50px;
line-height: 50px;
background: #eee;
z-index: 6;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.round_border{
position: absolute;
top: 49px;
right: -26px;
width: 52px;
height: 50px;
line-height: 52px;
border: 1px solid #000;
z-index: 4;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
?
?
回答by feeela
This is not possible with CSS.
这在 CSS 中是不可能的。
Solution A) involves graphics used as background and solution B) uses a layer behind the vertical bar to draw the oval, a second layer for the bar itself and a third DIV for the X and it's link.
解决方案 A) 涉及用作背景的图形，解决方案 B) 使用垂直条后面的层绘制椭圆，第二层用于条本身，第三个 DIV 用于 X 及其链接。
回答by collimarco
Use z-index property.
使用z-index 属性。
#nameWidgeteMain, #nameWidgeteMain2 {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
#nameWidgeteMain2 {
z-index: -2;
border: 1px solid #dbe0e3;
}
.nameWidgeteCloseArea {
z-index: -1;
...
}
This is not merging but the result is the same.
这不是合并，但结果是相同的。
