html - Rails を使用したアジャイル Web 開発の例では、テキストの上に画像が表示されます

Question

本 ( Rails を使用したアジャイル Web 開発) を読んでいて、96 ページで問題に遭遇しました。

私は本のコードに正確にこだわっていますが、これはわかります。

これにアプローチする別の方法はテーブルを使用することですが、最初に別の解決策があるかどうかを知りたいです。

Answer 1

テキストの上に画像を作成するのは、CSSのposition: absolute;ルールです。ヘルプをimg見る

Answer 2

これらのコメントは、div を使用して整理します。画像とコメントを格納する最初の div。画像を格納する 2 番目の div。そして、コメントを格納する 3 番目。

html:

<div class="comment-container">

  <div class="comment-img">
    <!whatever code you use to pull images from the database>
  </div><!ENDcomment-img>

  <div class="comment-field">
    <!whatever code you use to pull comment content from the database>
  </div><!ENDcomment-field>

</div><!ENDcomment-container>

CSS:

 .comment-container{
     padding: 5px; 
     border-bottom: 1px dashed #009fe4; 
     margin: 2px 0 5px 0;
  }

 .comment-img{
     float: left;
     width: 80px;
     height: auto;
  }

 .comment-field{
     width: 700px;
     height: auto;
     padding: 0 0 0 10px;
  }

これが役立つことを願っています。

@subm0ral