CSS:如何让孩子适合父母的宽度
我创建了具有许多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 的后面（您可以使用检查元素看到这一点）
演示： http:
//jsfiddle.net/tqVUy/48/