css - 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 */
}