如何正確對齊Div

Question

我試圖將我的DIV對齊以形成項目符號圖表。 我創建了一個示例數據，它將用於使項目符號圖變得動態，這里是代碼：

      {bulletchartdata.map(
        (item,index)=>{
            return(
    <div>
        <div className="satisfactory"style={{width:item.satisfactoryVal,height:20,backgroundColor:'#f2f2f2'}}/> 
            <div className="badcolor"style={{width:item.badVal,height:20,backgroundColor:'#d8d6d6'}}/>
                <div className="measure"stlye={{width:item.performanceVal,height:10,backgroundColor:'#8c8c8c'}}> 
                    <div className="target"style={{width:item.symbolMarker,width:1,height:15,backgroundColor:'#000000'}}>     
            </div>
        </div>
    </div>
            );

        }
    )}

這是我想在div中傳遞而不是在CSS中聲明的示例數據：

    export const bulletchartdata = [
    { performanceVal: 100, symbolMarker: 100, badVal: 300, satisfactoryVal: 150}

這是CSS ：（現在我不想使用此CSS（這就是為什么某些行在“注釋”中）的原因，因為我試圖在DIV中輸入所有樣式（請檢查div代碼）

    .satisfactory {     
      /* width:300px; */
     /*  height:20px; */
      background-color:#f2f2f2;  /* satisfactory */
      position:relative;
    }


    .badcolor {    
      /* width:160px; */
      /* height:20px; */
      background-color:#d8d6d6; /* badcolor */
      position:relative;
      bottom:0px;
    }


    .measure{  
      width:275px;
      height:7px;
      background-color:#8c8c8c; /* Performance Measure */
      position:inherit;
      right:0px;
      top:9px; 
      bottom:0px;
    }

    .target{   
      width:1px;
     /*  height:20px; */
      background-color:#000000;  /* target */
      position: inherit;
      left:240px;
      right:0px;
      top:-6.5px; 
      bottom:0px;
    }

這是結果

我希望它看起來像這樣

Answer 1

您將需要對內部div使用position:absolute ...並更改標記（無需將每個div都包裝在其中） ...。

 .satisfactory { position: relative; } .satisfactory div { position: absolute; } 

 <div class="satisfactory" style="background: #f2f2f2;width: 300px;height: 40px;"> <div class="badcolor" style="background-color:#d8d6d6;height:40px;width:150px;"></div> <div class="measure" style="background-color:#8c8c8c;height:10px;width:250px;top:15px"></div> <div class="target" style="background-color:#000000;height:40px;width:1px;left:200px;top:0;"></div> </div>