javascript - 如何定位元素

Question

.borderBox {
  border: 1px solid green;
}

.uniqueClickMetricsContainer {
  display: flex;
  flex-direction: column;
}

.uniqueClickMetrics {
  display: block;
  margin-bottom: 10px;
}

.border {
  box-sizing: border-box;
  border-right: solid 2px #cccccc;
  font-size: 30px;
  position: relative;
  left: 3px;
}

.restUniqueClickPercentage{
  
}

.topOneUniqueClickPercentage{
  
}

.topTwoUniqueClickPercentage{
  
}

<div class="count-div">
  <div class="uniqueClickMetricsContainer">
    <div class="uniqueClickMetrics">
      <span class=borderBox>Hello</span>
      <span class="restUniqueClickPercentage">2%</span>
      <span class="border"></span>
      <span class="restUniqueClickCount">8</span>
    </div>
    <div class="uniqueClickMetrics">
      <span class=borderBox>Hello</span>
      <span class="topOneUniqueClickPercentage">40%</span>
      <span class="border"></span>
      <span class="topOneUniqueClickCount">99</span>
    </div>
    <div class="uniqueClickMetrics">
      <span class=borderBox>Hello</span>
      <span class="topTwoUniqueClickPercentage">22%</span>
      <span class="border"></span>
      <span class="topTwoUniqueClickCount">98</span>
    </div>
    <div class="uniqueClickMetrics">
      <span class=borderBox>Hello</span>
      <span class="topThreeUniqueClickPercentage">0%</span>
      <span class="border"></span> <span class="topThreeUniqueClickCount">97</span>
    </div>
  </div>
</div>

我试图将几个 HTML 元素定位在 count-div 下相对于 borderBox 但我只能定位与 borderBox 元素相邻的第一个元素，我的问题是如何将所有元素定位在 borderBox 之后相对于borderBox only.As you can see In the Fiddle border 没有正确定位，因为它是相对于其前一个元素的，但我想相对于 borderBox 定位它。

FIDDLE

Answer 1

我不明白你的问题，但我认为你在问这个问题

.borderBox {
  border: 1px solid green;
}

.uniqueClickMetricsContainer {
  display: flex;
  flex-direction: column;
}

.uniqueClickMetrics {
  display: block;
  margin-bottom: 10px;
}

.border {
  box-sizing: border-box;
  border-right: solid 2px #cccccc;
  font-size: 30px;
  position: relative;
}

span.actual {
  display: inline-block;
  width: 30px;
}

<div class="count-div">
  <div class="uniqueClickMetricsContainer">
    <div class="uniqueClickMetrics">
      <span class=borderBox>Hello</span>
      <span class="restUniqueClickPercentage actual">2%</span>
      <span class="border"></span>
      <span class="restUniqueClickCount">8</span>
    </div>
    <div class="uniqueClickMetrics">
      <span class=borderBox>Hello</span>
      <span class="topOneUniqueClickPercentage actual">40%</span>
      <span class="border"></span>
      <span class="topOneUniqueClickCount">99</span>
    </div>
    <div class="uniqueClickMetrics">
      <span class=borderBox>Hello</span>
      <span class="topTwoUniqueClickPercentage actual">22%</span>
      <span class="border"></span>
      <span class="topTwoUniqueClickCount">98</span>
    </div>
    <div class="uniqueClickMetrics">
      <span class=borderBox>Hello</span>
      <span class="topThreeUniqueClickPercentage actual">0%</span>
      <span class="border"></span>
      <span class="topThreeUniqueClickCount">97</span>
    </div>
  </div>
</div>