0

CSS を使用して Ruby on Rails ビューでこのようなことを達成するための最良の方法は何ですか?

これは私が今持っているものです：

リスト アイテム 1 - 長すぎません ここに画像の説明を入力 ここに画像の説明を入力
リスト アイテム 2 - 非常に長いので、「列」をこれほど大きくしたくありません。ここに画像の説明を入力 ここに画像の説明を入力
リスト アイテム 3 をラップしたい - こんにちはここに画像の説明を入力 ここに画像の説明を入力

これは私が欲しいものです:
ここに画像の説明を入力

List Items は Solution クラスから取得されます。高評価/低評価は、Solution_votes クラスからの投票です。

理想的には、3 列のテーブルを使用しますが、Axaj と JQuery も使用して更新し、順序付けられていないリストを使用したいと考えています ($('#items_list').prepend(new_item); を使用して簡単に更新するため)。

4

1 に答える 1

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 */
}
于 2012-07-18T14:13:10.037 に答える