CSS / Ruby on Rails - 将列表分成三个独立的等宽列

Question

使用CSS在Ruby on Rails视图中实现类似内容的最佳方法是什么：

这就是我现在所拥有的：

列表项1 - 不会太长
清单第2项 - 非常非常长，我不希望“专栏”这么大;我希望它包装
列表项目3 - 你好

这就是我想要的：

列表项来自解决方案类;拇指向上/向下是来自Solution_votes类的投票。

理想情况下，我会使用一个包含3列的表，但是，我还使用Axaj和JQuery进行更新，并希望使用无序列表（使用$（'＃items_list'）轻松更新.prepend（new_item）; ）。

Answer 1

HTML：

<ul class="entries">
  <li>
    <span class="title">List Item 1 - is not too long</span>
    <a class="thumb down">0 Votes Down</a>
    <a class="thumb up">0 Votes Up</a><!-- float:right will place this to the left -->
  </li>
  ...
</ul>

CSS：

ul.entries { list-style: none; }
ul.entries li {
  margin: 10px 0;
  border: 2px solid black;
  border-radius: 6px;
  width: 600px;
}
ul.entries .title {
  float: left;
  width: 380px;
}
ul.entries .thumb {
  float: right;
  margin-left: 20px;
  width: 90px;
  /* todo: color, background + padding-left declarations for thumb icons */
}