html - CSS分为两种

Question

有人可以指导我 - 在 CSS 中，我如何将一个方形的盒子分成两部分，以便在中间有一个间隙。

见演示

HTML：

<div id="bigBox">
    <div id="leftBox"><div>
    <div id="rightBox"></div>
 </div>

CSS：

#bigBox {
border-radius: 100px 0 100px 0;
height: 300px;
background: pink;
}

#leftBox {
    float:left;

}

#rightBox {
float:right;
}

编辑：我知道它可以在其他脚本语言中完成，但我想要它在 CSS 中，我知道这是可能的。谢谢。

Answer 1

也许你的意思是这样的？

#bigBox div {
    height: 300px;
    background: pink;
    width:45%;
}

#leftBox {
    border-radius: 100px 0 0 0;
    float:left;
}

#rightBox {
    border-radius: 0 0 100px 0;
    float:right;
}

http://jsfiddle.net/Qxjxj/

Answer 2

<div id="boxes" style="width:100%;"> <div id="box1" style="float:left;width:47%;border:1px solid black;">BOX1 CONTENT</div> <div id="box2" style="float:right;width:47%;border:1px solid black;">BOX2 CONTEXT</div> </div>

这应该会给你你正在寻找的效果。

Answer 3

在CSS3中，您可以实现类似于划分,div

通过使用伪对象:before和:after.

见演示

Answer 4

放置像素没有帮助。而且你不需要三个 CSS id。尽管用户增加了浏览器窗口的宽度，但我的代码更加流畅，页面将保持 UI。 http://jsfiddle.net/spKMM/8/看到这段代码

这里我在html中只使用了两个s

<div id="bigLeftBox"></div>
<div id="bigRightBox"></div>

并且只使用了 2 个 CSS 块，一个用于左侧，下一个用于右侧。

#bigLeftBox {
    border-radius: 100px 0 0 0;
    height: 100px;
    width:49%;
    background: pink;
    float:left;
}
#bigRightBox {
    border-radius: 0 0 100px 0;
    height: 100px;
    width:49%;
    background: green;
    float:right;
}

Answer 5

好的，

这有点草率，但根据我从您的问题中收集到的信息，这就是您所追求的。

http://jsfiddle.net/spKMM/3/

HTML

<div id="bigBox">
   <div id="rightBox"></div>
   <div id="leftBox"><div>
</div>

CSS

#bigBox {
  width:800px;
  height: 300px;
}
#leftBox {
  float:left;
  height:300px;
  width: 390px;
  background: pink;
  margin:0;
  border-radius: 100px 0 0 0;
}
#rightBox {
  float:right;
  height:300px;
  width: 390px;
  background: pink;
  border-radius:0 0 100px 0;
}