Question

有人可以指导我吗 - 在CSS中，我怎样才能将一个方形盒分成两个，所以在它们中间有一个间隙。

请参阅DEMO

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

<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 2

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

使用伪对象:before和:after。

请参阅DEMO

Answer 3

也许你的意思是这样的？

#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 4

确定，

这有点草率，但从我从你的问题中收集的内容，这就是你所追求的。

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

Answer 5

放置像素没有帮助。你不需要三个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;
}

CSS分为两部分

5 个答案: