html - 如何正确对齐 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;
    }

Here is the Result

I want it to look like this

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>