如何使用css获取这些div的边框？

Question

我正在尝试为甘特图制作一个进度指标，显示目标进度的实际进度，有点像这样：

黑条是目标，红色是实际进度。

示例代码（它是动态生成的）是：

<div style='border: 1px solid red; position:relative; text-align:right'>
       <div class='progressBarRed' style='width:40%; float:left'></div>
       <div class='progressBarEmpty' style='width:60%; float:left;'></div>
       <div class='progressBarTarget' style='width:75%;'></div>
 </div>  

，CSS是：

/* Gant Bar
-----------------------------------------------*/

    div.progressBarEmpty
    {
        height:18px;
        position:relative;
        background: #dddddd;
    }

    div.progressBarGreen
    {
        position:relative;
        top:0px;left:0px;
        height:18px;
        background: #009900;
        z-index:0;

    }
    div.progressBarRed
    {
        position:relative;
        top:0px;left:0px;
        height:18px;
        background: #ee0000;
        z-index:0;

    }

    div.progressBarTarget
    {
        position:absolute;
        top:7px;left:0px;
        height:4px;
        background-color:#000000;
        border-style: none;
        z-index:1;
    }

我遇到的问题是我无法让红色边框围绕着这些酒吧，就像这样：

它适用于空条，但当我引入红条（和浮动条）时，边框会折叠。

JSFiddle在这里：https://jsfiddle.net/bdgriffiths/funnx3uz/

Answer 1

只需一个元素即可完成相同的操作。将z-index: -1;添加到伪元素以将其带到所有内容的底部。

将鼠标悬停在栏上以查看红色进度条。

<强> Fiddle

＆＃13;

＆＃13;

div {
    height: 25px;
    border: 1px solid red;
    width: 100%;
    position: relative;
}
div:before {
    content: '';
    position: absolute;
    height: 5px;
    width: 75%;
    top: 10px;
    background-color: black;
}
div:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background-color: red;
    z-index: -1;
}
div:hover:after {
    width: 75%;
    transition: 1s ease;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将overflow: auto;样式添加到div：

<div style='border: 1px solid red; overflow: auto; position:relative; text-align:right'>
       <div class='progressBarRed' style='width:40%; float:left'></div>
       <div class='progressBarEmpty' style='width:60%; float:left;'></div>
       <div class='progressBarTarget' style='width:75%;'></div>
 </div>  

基本上如果你在另一个div中使用“float div”，它会导致内部div的高度（float样式）不会被添加到out div的高度，所以在你的例子中，out div有0高度。 overflow导致它的内部div高度被添加到div的高度。