Css /html必须创建论坛风格的消息

Question

谁能告诉我任何指南/提示必要的css/html创建类似的布局论坛消息部分:

<>之前------------------------[8] User1一些味精------------------------[8] User2另一个消息------------------------之前

这是1主div和几个子div或更简单的东西，如css样式的列表或表等?请让我知道"正确"的方式来实现这个布局没有最新的css3/html5/测试版代码

Answer 1

示例:

<style>
    .message {margin-bottom: 15px; }
    .image {float:left; margin-right: 10px; }
    .user {float:left; font-weight:bold; color:#009; margin-bottom: 5px; }
    .content { margin-left: 30px;font-style:italic; color:#; }
</style>
<div>
    <div class="message">
        <div class="image"><img src="http://www.gravatar.com/avatar/df125f7b89730a39163bb17c1c18c1d9?s=18&d=identicon&r=PG" /></div>
        <div class="user">Silvertiger</div>
        <div style="clear:both;"></div>
        <div class="content">Does this work as expected?</div>
    </div>
    <div class="message">
        <div class="image"><img src="http://www.gravatar.com/avatar/98d247dcb9453a0d5adc70cd6b3acde9?s=18&d=identicon&r=PG" /></div>
        <div class="user">user2309722</div>
        <div style="clear:both;"></div>
        <div class="content">Indeed sir it appears to, Thank you</div>
    </div>
</div>

Answer 2

可以这样做:

<div id="thread">
  <div class="thread-post">
    Post #1 contents
  </div>
  <div class="thread-post">
    Post #2 contents
  </div>
  <div class="thread-post">
    Post #3 contents
  </div>
</div>

对于CSS，你可以这样做:

.thread-post {
  padding: 10px
  border-bottom: 1px solid #ddd
}
.thread-post:nth-child(even) {
  background-color: #eee /* For distinguishing every other post */
}

根据需要修改

Answer 3

我会用一个div为每一对作者信息+消息，然后，在每个里面它会是某种浮动的左div为包含作者信息(用户名，头像等)(因为它通常是在论坛上看到，但风格是由你)随着另一个div包含链接的消息。

Answer 4

我是这样: 演示

<div class="box">
    <div class="list">AAAAAAAAAAAAAAA</div>
    <div class="list">BBBBBBBBBBBBBBB</div>
    <div class="list">CCCCCCCCCCCCCCC</div>
    <div class="list">DDDDDDDDDDDDDDD</div>
</div>

With css as :

.box {
position: absolute;
border: 2px solid grey;
}
.list {
line-height: 30px;
}
.list:not(:last-child) {
border-bottom: 1px solid red;
}