有人可以指导我-在 CSS 中,我如何将一个方形的盒子分成两个,所以在中间有一个间隙。
SeeDEMOHTML格式:
<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;
}
编辑:我知道它可以在其他脚本 lang 中完成,但我希望它在 CSS 中,我知道这是可能的。
Ok,
这是一个有点草率,但从我从你的问题收集这是你之后。
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;
}
也许你的意思是这样的?
#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/
<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>
这应该给你你正在寻找的效果。
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(33条)