Rails CSS3 投票栏

Question

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

这是

的代码

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

那么请您帮我提供一个链接或 JSFiddle/Codepen 以及可以与我的 Rails 一起使用的 CSS 进度条。

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;
}