TOC
パーツリストに戻る
表示例
ソース
html
<div class="dparts"><div class="parts commentsList">
<h3>パーツタイトル</h3>
<div class="partsInfo top">
<p class="number">195件中 1件~20件を表示</p>
<p class="moreInfo"><a href="">次を表示</a></p>
</div>
<!-- ここからループ -->
<dl>
<dt>02月14日<br />15:13</dt>
<dd>
<div class="header">
<p class="heading">記事タイトル</p>
<p class="public">(全員に公開)</p>
</div>
<div class="body"><p>
記事本文
</p></div>
<div class="footer"><p>
<a href="">コメント(0)</a>
| <a href="">もっと読む</a>
| <a href="">編集</a>
</p></div>
</dd>
</dl>
<!-- ここまでループ -->
<div class="partsInfo bottom">
<p class="number">195件中 1件~20件を表示</p>
<p class="moreInfo"><a href="">次を表示</a></p>
</div>
</div></div>
template
CSS
/*==============================================================================
* 23. コメント・書き込み一覧(commentsList)
*----------------------------------------------------------------------------*/
div.commentsList div.top {
border-bottom: 0;
}
.commentsList dl {
width: 100%;
}
.commentsList dt {
float: left;
width: 60px;
padding: 4px 3px;
border-top: 1px solid #cccccc;
text-align: center;
}
.commentsList dd {
float: right;
width: 456px;
}
.commentsList dd div {
padding: 4px 3px;
border-width: 1px 0 0 1px;
border-style: solid;
border-color: #cccccc;
}
.commentsList dd div.header {
position: relative;
}
.commentsList dd div.header p.heading {
margin-right: 140px;
}
.commentsList dd div.header p.public {
position: absolute;
top: 4px;
right: 4px;
}
.commentsList dd div.footer p {
text-align: right;
}
関連情報