如何使div动态移动到另一个

Question

所以我有两个代表两行的div（一个溺爱和一个实线），并使用php我取两个数字。我需要将这些数字放在这些行的顶部和下方：

CSS：

.outer, .inner, .target {
          height: 14px;
          margin-bottom: 5px;
        }
    
        .outer {
          background-color: #cccccc;
          width: 80%;
          margin: 0 auto;
          position: relative;
          font-size: 10px;
          line-height: 14px;
          font-family: sans-serif;
        }
    
        .inner {
          background-color: <?php echo $color?>;
          position: absolute;
          z-index: 1;
          color: white;
        }
    
        .target {
          background-color: transparent;
          width: 19px;
          position: absolute;
          border-right: 2px dotted black;
          z-index: 2;
          color: black;
          text-align: right;
        }
    
        .solid_line{
          color: black;  
          float: right;
          width: 3px;
          border-right: 3px solid black;
          height: 16px;
        }

    <div class="outer"> 
            <div class="target" style="width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $target; ?> / <?php echo $base; ?> * 100))">
                <div>Target: <?php echo number_format((float)$target, 2, '.', ''); ?>%
                </div>
            </div>                   
            <div class="inner" style=" width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $avg; ?> / <?php echo $base; ?> * 100))">
                <div class="solid_line">
                    <div><?php echo number_format((float)$avg, 2, '.', ''); ?>%</div>
                </div>
            </div>
        </div>

现在它看起来像这样：

Answer 1

也许您可以为文字使用css :before和:after选择器，然后将它们与top和left对齐。这也消除了您之前使用的某些div标记的需要。

您可以通过增加/减少width和inner元素上设置的内联outer来测试功能。线条和文字将正确重新定位。

演示：

.outer,
.inner,
.target {
  height: 14px;
  margin-bottom: 5px;
}
.outer {
  background-color: #cccccc;
  width: 80%;
  margin: 20px auto;
  position: relative;
  font-size: 10px;
  line-height: 14px;
  font-family: sans-serif;
}
.inner {
  background-color: green;
  position: absolute;
  z-index: 1;
  text-align: right;
  border-right: 2px solid black;
}
.inner:after {
  content: '25% ';
  display: inline-block;
  left: 10px;
  position: relative;
  height: 100%;
  top: -14px;
}
.target {
  background-color: transparent;
  width: 19px;
  position: absolute;
  z-index: 2;
  color: black;
  text-align: right;
  border-right: 2px dotted black;
}
.target:after {
  content: 'Target: 50%';
  display: inline-block;
  left: 28px;
  position: relative;
  height: 100%;
  top: 14px;
}
.solid_line {
  color: black;
  float: right;
  width: 3px;
  border-right: 3px solid black;
  height: 16px;
}

<div class="outer">
  <div class="target" style="width: 340px">
  </div>
  <div class="inner" style="width: 170px">
  </div>
</div>

Answer 2

你有。它与上面的答案类似。

.outer,
.inner,
.target {
  height: 14px;
  margin-bottom: 5px;
}

.outer {
  background-color: #cccccc;
  width: 80%;
  margin: 0 auto;
  position: relative;
  font-size: 10px;
  line-height: 14px;
  font-family: sans-serif;
  margin-top: 20px;
}

.inner {
  background-color: green;
  position: relative;
  z-index: 1;
  color: white;
  margin-top: -18px;
}

.target {
  background-color: transparent;
  width: 19px;
  position: relative;
  border-right: 2px dotted black;
  z-index: 2;
  color: black;
  text-align: right;
}

.target div {
  position: absolute;
  top: -14px;
  right: 0;
}

.solid_line {
  color: black;
  float: right;
  width: 3px;
  border-right: 3px solid black;
  height: 16px;
}

.solid_line div {
  position: absolute;
  top: -18px;
  right: 0;
}

<div class="outer">
  <div class="target" style="width: 80%">
    <div>Target: 80%
    </div>
  </div>
  <div class="inner" style=" width: 50%">
    <div class="solid_line">
      <div>50%</div>
    </div>
  </div>
</div>