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

Question

在 Ruby on Rails View 中使用 CSS 实现类似效果的最佳方法是什么:

这是我现在拥有的:

列表元素 1 - 不太长
列表元素 2 - 非常非常长，我不希望“列”这么大；我想让它包装
list 元素 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 */
}