CSS：如何让孩子适应父母的宽度

2018-06-03 06:04:30

我用一些div子元素创建父元素，然后根据data-value属性计算JavaScript中的宽度。

如果我总结所有孩子的计算宽度，我将以100％结束。但由于某些原因，孩子不会真正占据父母宽度的100％：白色像素的一部分出现在最后一个孩子的后面。

这是一个小提琴，演示了这一点：http://jsfiddle.net/tqVUy/42/

Chrome和Firefox渲染效果很好，我在Safari和Opera中遇到了这个问题（请参阅下图）。

除此之外， overflow属性不能按预期工作，因为子元素与父div重叠（再次，仅在Safari和Opera中相关）。

问题：

是否有其他（正确）的方法让孩子适应父母？

圆角和overflow: hidden给父母，我可以让它在所有浏览器中看起来都一样吗？

新增css：

#component>div{height:100%;}
#component>div:first-of-type{border-radius:30px 0 0 30px;}
#component>div:last-of-type{border-radius: 30px;}

在js中编辑：

$('#component').children().not(':last').each(function () {

怎么了：
最后一个div不会左移，只会填充剩下的空间。我在第一个和最后一个div上添加了圆角以解决角落问题。最后一个div在每个角落都有30px的半径，因为div实际上是在其他div的后面（你可以用inspect元素看到）

演示：
http://jsfiddle.net/tqVUy/48/

我也面临这样的问题。这就是为什么为孩子定义边界半径的原因。这样写：

#component > div:first-child{
    border-radius:30px 0 0 30px;
}
#component > div:last-child{
    border-radius:0 30px 30px 0;
}

检查这个http://jsfiddle.net/tqVUy/49/

链接地址: http://www.djcxy.com/p/11189.html