Javascript 宽度为2%时，子div重叠圆形（带半径）容器

我有一个长的矩形容器，有一个半径

我还有3个子div，在容器中

这是：

如上图所示，第一个子容器（白色）和第三个子容器（红色）也设置了一个半径，以匹配容器半径

现在，子容器的宽度将是动态的（可由用户更改）。因此，用户将能够更改所有三个子容器的宽度，以满足其需求

但是看看当我给第三个容器2%的宽度时会发生什么：

当我对第一个子对象执行相同操作时，也会发生同样的情况（它与容器的圆形边框重叠）

子容器1（白色）向左浮动，子容器3（红色）向右浮动

我需要一种方法来阻止重叠的发生

我可以使用JS和JQuery，以防您的疑惑

谢谢

编辑： CSS:

.parent{
边框：1px实心#5b；
高度：30px；
宽度：80%；
右：0%；
位置：相对位置；
右边距：自动；
左边距：自动；
溢出：隐藏；
z指数：3；
}
.儿童班{
显示：内联块；
位置：相对位置；
宽度：自动；
身高：100%；
边际：0px；
右边框宽度：1px；
右边框样式：实心；
右边框颜色：#5c；
框大小：边框框；
}
#孩子1{
宽度：33.33；
背景重复：重复-x；
背景位置：中心；
浮动：左；
背景色：#fff；
}
#孩子2{
宽度：33.33；
背景重复：重复-x；
背景位置：中心；
背景色：#0CF；
}
#孩子3{
背景重复：重复-x；
背景位置：中心；
宽度：33.33；
浮动：对；
背景色：#F00；
}

HTML:

---

您是否尝试过给它们一个z索引，以便它们具有堆栈顺序？另外，在您的CSS中，父级上隐藏的溢出情况如何？

：

parent{
    overflow: hidden;
}

这样您就不必费心在子对象上匹配

边界半径了

编辑
我创建此项目是为了演示：

不需要在子对象上使用
边界半径
overflow:hidden
在子对象重叠时对其进行取整
不必要的
background-
子项属性被删除
小比例的预期行为
更新
关于这一点的另一项说明：
如果您希望CSS/HTML为您执行逻辑（而不是将最后一个元素从栏中删除），那么您显然对CSS和HTML的功能有误解

我已经更新了，为这个问题提供了一种修补程序。第三个孩子绝对位于最右边，所以它总是呆在酒吧里。< / P>
更新
最后，在Webkit中，没有正确剪辑背景。看起来你现在除了这样的事情之外什么都做不了：

<div class="hasBorder hasBorderRadius">
    <div class="hasBorderRadius hasHiddenOverflow">
        <div class="containsContent">
        </div>
    </div>
</div>


也许你可以用另一个从左边开始增长的元素来覆盖它，而不是降低它的宽度。@Pointy但如果第二个div（蓝色）需要调整怎么办？溢出隐藏没有任何效果，z索引也不起作用。好了，现在我来看看这里发生了什么，边界半径不是从默认矩形形状重新塑造div，而是塑造div的内部，这意味着div仍然具有其原始长方体形状，其子对象表现为对矩形形状的腐蚀，而不是作为剪切类型的边界半径。检查：使用inspect元素并动态调整红色div的右侧（到负数），以查看它是否被父对象的原始形状剪裁。子对象不受边界半径的约束。这也解释了为什么溢出在半径上不起作用，因为它只在div元素的原始矩形形状上起作用。我的评论不是为了让它起作用，而是为了告诉你为什么它不起作用。当我这样做时，整个子div在变大（宽度不足）时会消失.对于那些试图帮助你的人，投下无法解决你问题的反对票是一种可怕的反应。在常见问题解答中：
每当你遇到一篇非常草率、不费力气的帖子，或者一个答案明显而且可能是危险的错误时，使用你的反对票。
回答你的问题：你是否尝试在父div上使用
clearfix
？您在不清除父项的情况下浮动子项，因此它的高度将为
0
，并且可能会导致子项消失（非正常）并使用
溢出：隐藏
。如果您使用inspect元素（父项中的宽度或位置）动态调整css，这似乎是设计的工作方式您将看到，边界半径不是环绕div，而是环绕div的内部，因此div的原始形状（正方形）保持固定，因此它的行为仍然类似于正方形。圆角似乎没有其他用途，然后在视觉上显示圆角，但不是实际环绕元素。此外，如果缩小它（减小宽度）您会注意到舍入是倾斜的，而不是调整大小（就像在不改变高度的情况下改变图像的宽度）@codewombatnope。这不是它的工作原理。如果你仔细阅读，你会发现任何剪辑到边框的东西都会剪辑到圆角半径。这就是为什么
overflow:hidden
适用于圆角。我过去曾使用
边框半径
和
溢出：隐藏
将内容剪辑到圆角，所以我知道这是可行的。检查元素通常会勾勒出元素所占据的物理块（即，其他元素不会自动放置在该区域中的位置）。
parent{
    overflow: hidden;
}

<div class="hasBorder hasBorderRadius">
    <div class="hasBorderRadius hasHiddenOverflow">
        <div class="containsContent">
        </div>
    </div>
</div>