如何使一个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>

现在它看起来像这样：

- Alphonse

---

尝试在您的数字上使用“绝对定位”，然后通过使用“top：-10px”或“bottom：-10px”将其放置在上方或下方。 - Andrew

遗憾的是，这并不能使它们与 .inner 和 .solid_line div 元素一起移动。 - Alphonse

你需要使用jQuery来处理PHP数字，并使用left: ??px，然后使用jQuery覆盖左侧数字，这样它就会随着数字的变化而改变。 - Andrew

Answer 1

也许您可以使用CSS的:before和:after选择器来处理文本，然后只需使用top和left对齐它们。这还消除了之前所使用的一些div标签的需要。

您可以通过增加/减少内部和外部元素上设置的内联宽度来测试功能。线条和文本将重新正确定位。

演示：

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

- Chris

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>

- Autista_z