如何使用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; 將偽元素帶到所有內容的底部。

將鼠標懸停在該欄上可以看到紅色的進度欄。

小提琴

 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; } 

 <div></div> 

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樣式）未添加到外部div的高度中，因此在您的示例中，外部div的高度為0。 overflow導致將其內部div的高度添加到外部div的高度中。