0

我想用三个 div 来创建一个圆形的效果，比如

<div class="wrapper">
   <div class="left-corner"></div>
   <div class="center-repeat"></div>
   <div class="right-corner"></div>
</div>

并且.left-corner有.right-corner一个唯一的角落背景图像css：

.wrapper
{
   width:100%
   height:110px;
}
.left-corner
{
   background:...
   width:110px;
   height:110px;
   float:left
}
.right-corner
{
   background:...
   width:110px;
   height:110px;
   float:right
}

但是我应该如何渲染我尝试使用的中间 divwidth:100%但角落 div 将被推动并成为另一行我如何将三个 div 设置为一行并看起来正常？

4

4 回答 4

0

如果你wrapper是按百分比设置的，那么我认为最好将它的孩子也保持在百分比中，也许使用 33%、33% 和 34% 来获得 100%。对于中间，或者center-repeat我认为您可能也需要使用float: left，所以它紧贴left-corner.

于 2012-04-27T06:49:24.553 回答
0

您是否尝试过使用border-radius 属性？

您可以只使用中心 div 和边框半径任何其他角。
https://developer.mozilla.org/en/CSS/border-radius
支持 IE 中的“border-radius” 

<div class="wrapper">
    ... content inside wrapper ... 
</div>

.wrapper
{
    width: 100%;
    height: 110px;
    border-radius: 5px;
}
于 2012-04-27T06:54:35.793 回答
0

嗨，你应该这样做

CSS

.wrapper
{
   width:100%
   height:110px;
    overflow:hidden;
    border:solid 5px black;
    border-radius:25px;
}
.left-corner
{
   background:red;
   width:110px;
   height:110px;
   float:left
}
.right-corner
{
   background:green;
   width:110px;
   height:110px;
   float:right
}


.center-corner{
width:100%;
    background:yellow;
    height:110px;
}

HTML

<div class="wrapper">

    <div class="left-corner">Left</div>
    <div class="right-corner">Right</div>
    <div class="center-corner">Center</div>    
</div>

现场演示http://jsfiddle.net/pTxrW/

于 2012-04-27T07:45:35.520 回答
0

这是我的尝试：jsfiddle。
左右角的高度比中心块低 10px，因此更容易看到它们之间的边界。

于 2012-04-27T08:57:14.570 回答