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