css - Rails CSS3 投票栏

Question

我使用了 Acts_as_votable，我想显示一个类似 youtube 的不喜欢的栏。我环顾四周，似乎找不到每边都有两种不同颜色（绿色和红色）的东西，如果有 1 个喜欢和 0 个不喜欢，则用 100% 的绿色填充条形，反之亦然。因此，如果有 80 个喜欢和 20 个不喜欢，则用 80% 的绿色和 20% 的红色填充条形图

这是代码

• 所有选票<%= @movie.votes.size %>
• 喜欢投票<%= @movie.upvotes.size %>
• 不喜欢的选票<%= @movie.downvotes.size %>

因此，您能否帮助我提供一个链接或带有 CSS 进度条的 JSFiddle/Codepen，该进度条可以与我的 Rails 一起使用。

Answer 1

简单的方法是http://jsfiddle.net/achr3f/FtsXp/

要使用 rails 获得此功能，您可以执行类似的操作

.vote
  .up-vote{style: "width: #{@movies.upvotes}%"}
  .down-vote{style: "width: #{@movies.downvotes}%"}

css

.vote{
  width: 300px;
  border: 1px solid black;
  height: 9px;
}

.up-vote{
  float: left;
  height: 9px;
  background: green;
}

.down-vote{
  float: left;
  height: 9px;
  background: red;
}