如何合并两个div [英] How to merge two divs

问题描述

我有两个div，应该看起来像一个数字。问题是圆形块的边界。见图。下面。 css

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

#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);
}

推荐答案

http://jsfiddle.net/VNAZA/

使用两个div：一个只有边框，它在矩形下分层，另一个与实际内容分层，在矩形上分层。

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.

HTML：

<div class="container"> 
  <div class="rect"></div>
  <div class="round_content">x</div>
  <div class="round_border"></div>
</div>

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;
}

这篇关于如何合并两个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！