在表格单元格内重新缩放 div

Question

我正在尝试在表格的每一行中添加一个简单的赞成/反对票计数器。计数器基本上是一个由 css 形成的 div 容器，我将其插入到表格单元格中。然而，按原样，计票器会导致该行激增。我尝试调整最顶部的 div 容器的大小，但它只调整投票元素的大小。实际计数器的大小保持不变。我是 css 新手，所以我对事物还没有很好的认识。重写我的 CSS 的最佳方法是什么，以便我可以轻松地从最顶层缩放整个投票计数器，而无需手动更改所有子元素？如果我想把这个计数器贴在我网站上的其他地方，而不是在表格单元格内，那就太好了。

这里是 jsfiddle。 https://jsfiddle.net/havok2063/30way48v/

描述赞成/反对票计数器的非常简单的 html。

<div class="vote circle">
    <div class="increment up"></div>
    <div class="increment down"></div>

    <div class="count">8</div>
</div>

这是 CSS。

.vote {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 10rem;
  height: 10rem;
}

.circle .up { border-radius: 10rem 10rem 0 0; }
.circle .down { border-radius: 0 0 10rem 10rem; }
.circle .count { border-radius: 50%; }

.up {
  background: #4BC35F;
  height: 50%;
  margin-bottom: 0.25rem;  
}
.down {
  background: #C15044;
  height: 50%;  
}

.increment {
  flex: 1 0 0;
  text-align: center;
  opacity: .5;
  transition: 0.3s;
  cursor: pointer;
}
.increment:hover { 
  opacity : 1;
}

.count {
  position: absolute;
  top: 0;
  background: rgba(245,245,245,1.0);
  border-radius: 0.1rem;
  margin: 2.5rem;
  width: 5rem;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 5rem;
  text-align: center;
  box-shadow: 0 0 0 0.5rem rgba(245,245,245,1.0);
  pointer-events: none;
}

html, body { height: 100%; }

Answer 1

您是否想像这把小提琴一样使所有表格单元格的高度相同？ https://jsfiddle.net/30way48v/2/

如果是这样，请将其添加到您的 css td{height: 100px;}

Answer 2

好的，这里是较小的<td>'s 这是小提琴https://jsfiddle.net/30way48v/3/

td{height: 50px;}
.vote {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 5rem;
  height: 5rem;
  margin: 0px;

}

.circle .up { border-radius: 5rem 5rem 0 0; }
.circle .down { border-radius: 0 0 5rem 5rem; }
.circle .count { border-radius: 50%; }

.up {
  background: #4BC35F;
  height: 50%;
  margin-bottom: 0.25rem;  
}
.down {
  background: #C15044;
  height: 50%;  
}

.increment {
  flex: 1 0 0;
  text-align: center;
  opacity: .5;
  transition: 0.3s;
  cursor: pointer;
}
.increment:hover { 
  opacity : 1;
}

.count {
  position: absolute;
  top: 0;
  background: rgba(245,245,245,1.0);
  border-radius: 0.1rem;
  margin: 1.45rem;
  width: 2rem;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 2rem;
  text-align: center;
  box-shadow: 0 0 0 0.5rem rgba(245,245,245,1.0);
  pointer-events: none;

  &.upvoted { color: #4BC35F; }
  &.downvoted { color: #C15044; }
}

html, body { height: 100%; }