Lolidroid.txt

メモ書きです。

【css】アイコン付きのコメント風レイアウト

Bootstrapの.mediaみたいなやつをplain cssでやりたかったので、本家から必要なのだけをメモ。

f:id:Lolidroid:20160423202228p:plain

cssで以下のように定義します。

    .comment{margin: 10px auto;}
    .comment>div{display: table-cell; vertical-align: top; overflow:hidden; padding:10px;}

細かい数値は適宜調整します。以下のようにマークアップすれば完成です。

    <div class="comment">
      <div><img src="prof.jpg" alt="" /></div>
      <div>ここに本文を書きます。</div>
    </div>

それぞれのdivタグの中身はタイトルなどある程度自由に書けます。