css Flex方向容器中的两个内嵌块< span>< div>

zsohkypk 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(112)

我正在运行一个JS脚本与计数器，工作正常。但是，为了将data-val的大小从60,000减小到60k，脚本不能理解任何非整数的东西。
我尝试添加一个额外的<span>K</span>来转换数值，以便用户理解我们谈论的是数千。
因为我的容器有一个flex-direction: column，所以我添加的所有元素都是垂直堆叠的，这不是我想要实现的。
已经尝试使用display: inline-block和flex-direction: row，但在这里也不能真正工作。我不确定是否可以为这个元素覆盖容器CSS，或者是否应该采用完全不同的方法。

let valueDisplays = document.querySelectorAll(".num-itemcounter");
let interval = 1500;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function() {
    startValue += 1;
    valueDisplay.textContent = startValue;
    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});

.wrapper-itemcounter {
  margin: auto;
  width: auto;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
}

.container-itemcounter {
  width: 22vmin;
  height: 22vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1em 0;
  position: relative;
  font-size: 16px;
  border-radius: 0.5em;
  border-bottom: 10px solid #00ccbd;
  box-shadow: 3px 5px 5px 0px #8c9c9c;
  }

<div class="wrapper-itemcounter">
  <div class="container-itemcounter">
    <span class="num-itemcounter" data-val="60">00</span>
    <span class="metric-itemcounter">K</span>
    <span class="text-itemcounter">Happy Partners</span>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/76539128/two-in-line-blocks-span-within-a-flex-direction-container-div

3条答案

按热度按时间

mm9b1k5b1#

你必须将数字和k span Package 在一个div中，并给予该div指定行的flex-direction。

let valueDisplays = document.querySelectorAll(".num-itemcounter");
let interval = 1500;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function() {
    startValue += 1;
    valueDisplay.textContent = startValue;
    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});

.wrapper-itemcounter {
  margin: auto;
  width: auto;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
}

.container-itemcounter {
  width: 22vmin;
  height: 22vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1em 0;
  position: relative;
  font-size: 16px;
  border-radius: 0.5em;
  border-bottom: 10px solid #00ccbd;
  box-shadow: 3px 5px 5px 0px #8c9c9c;
  }
  .num-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}

<div class="wrapper-itemcounter">
  <div class="container-itemcounter">
    <div class="num-container">
        <span class="num-itemcounter" data-val="60">00</span>
        <span class="metric-itemcounter">K</span>
    </div>
    <span class="text-itemcounter">Happy Partners</span>
  </div>
</div>

快乐编码）

赞(0）回复(0）举报 2023-06-25

cnwbcb6i2#

let valueDisplays = document.querySelectorAll(".num-itemcounter");
let interval = 1500;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function() {
    startValue += 1;
    valueDisplay.textContent = startValue;
    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});

.wrapper-itemcounter {
  margin: auto;
  width: auto;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
}

.container-itemcounter {
  width: 22vmin;
  height: 22vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1em 0;
  position: relative;
  font-size: 16px;
  border-radius: 0.5em;
  border-bottom: 10px solid #00ccbd;
  box-shadow: 3px 5px 5px 0px #8c9c9c;
  }

<div class="wrapper-itemcounter">
  <div class="container-itemcounter">
    <article>
      <span class="num-itemcounter" data-val="60">00</span><span class="metric-itemcounter">K</span>
      <br>
      <span class="text-itemcounter">Happy Partners</span>
    </article>
  </div>
</div>

我在上面看到了另一个答案，你会把他们的CSS，但使用HTML的一个小技巧，我们可以使用<article>标记来产生非中断，除非指定了<br>。
希望这有帮助！

赞(0）回复(0）举报 2023-06-25

06odsfpq3#

请参见flex-wrap: wrap和flex-grow: 1的修改：

let valueDisplays = document.querySelectorAll(".num-itemcounter");
let interval = 1500;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function() {
    startValue += 1;
    valueDisplay.textContent = startValue;
    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});

.wrapper-itemcounter {
  margin: auto;
  width: auto;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
}

.container-itemcounter {
  width: 22vmin;
  height: 22vmin;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 1em 0;
  position: relative;
  font-size: 16px;
  border-radius: 0.5em;
  border-bottom: 10px solid #00ccbd;
  box-shadow: 3px 5px 5px 0px #8c9c9c;
 }
 
 .text-itemcounter {
  flex-grow: 1;
 }

<div class="wrapper-itemcounter">
  <div class="container-itemcounter">
    <span class="num-itemcounter" data-val="60">00</span>
    <span class="metric-itemcounter">K</span>
    <span class="text-itemcounter">Happy Partners</span>
  </div>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css Flex方向容器中的两个内嵌块< span>< div>

3条答案

相关问题

热门标签

最新问答