Question

我正在制作基于html 5视频标签的自定义视频播放器控制器。从开始我在px中添加了音量col的宽度，但是当进入全屏模式时，它必须变大，所以我决定使用百分比。但是，虽然每个col中的宽度相等，但浏览器会将其显示为不同。

＆＃13;

.volume-box {
  position: relative;
  cursor: pointer;
  display: inline-block;
  height: 100px;
  display: flex;
  align-items: center;
  width: 50px;
}

.volume {
  display: inline-block;
  height: 85%;
  width: 7%;
  background: #00adef;
}

.volume.trans {
  background: white;
}

＆＃13;

<div class="volume-box">
  <div class="volume trans" data-value="0"></div>
  <div class="volume" data-value="0.1"></div>
  <div class="volume trans" data-value="0.15"></div>
  <div class="volume" data-value="0.2"></div>
  <div class="volume trans" data-value="0.25"></div>
  <div class="volume" data-value="0.3"></div>
  <div class="volume trans" data-value="0.35"></div>
  <div class="volume" data-value="0.4"></div>
  <div class="volume trans" data-value="0.45"></div>
  <div class="volume" data-value="0.5"></div>
  <div class="volume trans" data-value="0.55"></div>
  <div class="volume" data-value="0.6"></div>
  <div class="volume trans" data-value="0.65"></div>
  <div class="volume" data-value="0.7"></div>
  <div class="volume trans" data-value="0.75"></div>
  <div class="volume" data-value="0.8"></div>
  <div class="volume trans" data-value="0.85"></div>
  <div class="volume" data-value="0.95"></div>
  <div class="volume trans" data-value="1"></div>
</div>

＆＃13;

Answer 1

使用弹性布局，如果您想在弹性儿童中使用固定宽度，则需要使用flex-basis而不是width，如果您想确保它们的宽度相同，将flex-shrink和flex-grow指定为0。或者简称flex: 0 0 7%。

.volume-box {
  position: relative;
  cursor: pointer;
  display: inline-block;
  height: 100px;
  display: flex;
  align-items: center;
  width: 50px;
}

.volume {
  height: 85%;
  background: #00adef;
  flex: 0 0 7%;
}

.volume.trans {
  background: white;
}

<div class="volume-box">
  <div class="volume trans" data-value="0"></div>
  <div class="volume" data-value="0.1"></div>
  <div class="volume trans" data-value="0.15"></div>
  <div class="volume" data-value="0.2"></div>
  <div class="volume trans" data-value="0.25"></div>
  <div class="volume" data-value="0.3"></div>
  <div class="volume trans" data-value="0.35"></div>
  <div class="volume" data-value="0.4"></div>
  <div class="volume trans" data-value="0.45"></div>
  <div class="volume" data-value="0.5"></div>
  <div class="volume trans" data-value="0.55"></div>
  <div class="volume" data-value="0.6"></div>
  <div class="volume trans" data-value="0.65"></div>
  <div class="volume" data-value="0.7"></div>
  <div class="volume trans" data-value="0.75"></div>
  <div class="volume" data-value="0.8"></div>
  <div class="volume trans" data-value="0.85"></div>
  <div class="volume" data-value="0.95"></div>
  <div class="volume trans" data-value="1"></div>
</div>

Answer 2

为了让它看起来不错，你需要给每个if (Array.isArray(data)) { // render as array } else { // render as something else }一个固定的宽度，否则你会受到浏览器四舍五入到7％不同的值，这就是它看起来不太好的原因。

＆＃13;

volume

＆＃13;

.volume-box {
  position: relative;
  cursor: pointer;
  height: 100px;
  display: inline-flex;     /*  changed to inline-flex so it will size with content  */
}

.volume {
  height: 85%;
  width: 3px;               /*  3px, the closest whole value based on 50px/19 = 2.63  */
  background: #00adef;
}

.volume.trans {
  background: white;
}

＆＃13;

为什么具有相等百分比宽度的div不能平等渲染

2 个答案: