javascript - 当宽度为 2% 时，子 div 重叠圆形(带半径)容器

Question

我有一个带有半径的长方形容器。

容器中还有 3 个子 div。

这里是:

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

现在，子容器的宽度将是动态的(可由用户更改)。因此，用户将能够更改所有三个子容器的宽度以满足他们的需要。

但是看看当我将第三个容器的宽度设置为 2% 时会发生什么:

当我对第一个 child 做同样的事情时，同样的事情发生了(它与容器的圆形边框重叠)。

子容器 1(白色)向左浮动，子容器 3(红色)向右浮动。

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

我可以使用 JS 和 JQuery，以防你疑惑。

谢谢

编辑: CSS:

.parent {
    border: 1px solid #5B5B5B;
    height: 30px;
    width: 80%;
    right: 0%;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    <? set_radius("25px",true);
    set_box_shadow("1px","1px","#F8F8F8");?>    
    overflow: hidden;
    z-index: 3;
}
    .child_class {
        display: inline-block;
        position: relative;
        width: auto;
        height: 100%;
        margin: 0px;
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #5C5C5C;
        box-sizing: border-box;
    }

    #child1 {
        width: 33.33;
        background-repeat: repeat-x;
        background-position: center center;
        <? set_radius("25px",false,false,true,false,true);?>
        float: left;
        background-color: #fff;
    }
    #child2 {
        width: 33.33;
        background-repeat: repeat-x;
        background-position: center center;
        background-color: #0CF;
    }

    #child3 {
        <? set_radius("25px",false,true,false,true,false);?>
        background-repeat: repeat-x;
        background-position: center center;
        width: 33.33;
        float: right;
        background-color: #F00;
    }

HTML:

<div class="parent">
          <div class="child_calss" id="child1"></div><div class="child_calss" id="child2"></div><div class="child_calss" id="child3"></div></div>

Answer 1

在你的 CSS 中:

parent{
    overflow: hidden;
}

那么您也不必为匹配子项上的 border-radius 而烦恼。

编辑

我创建了 this jsfiddle演示:

1. children 不需要border-radius
2. overflow: hidden 当子项重叠时将它们舍入
3. 子项上不必要的 background- 属性已删除
4. 小比例的预期行为

更新

关于此的另一个说明: 如果您希望 CSS/HTML 为您执行逻辑(而不是将最后一个元素从栏中删除)，那么您对 ​​CSS 和 HTML 的作用有明显的误解。

我已经更新了 jsfiddle为该问题提供一种补丁修复。第三个 child 绝对定位在最右边，所以它永远留在栏中。

更新

最后，here's the bug在没有正确裁剪背景的 Webkit 中。看来你现在无能为力，除了可能是这样的:

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