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中传递的示例DATA，而不是在CSS中声明它：

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

这里是CSS :(现在我不想使用这个CSS（这就是为什么某些行在＆＃34;注释＆＃34;）因为我试图在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

您需要使用position:absolute作为内部div ...并且还要更改标记（无需将每个div包裹在内） ....

＆＃13;

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

＆＃13;

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

＆＃13;

如何正确对齐Div

1 个答案: