Question

任何人都可以告诉我任何创建类似于的布局所需的css / html指南/提示消息论坛的一部分：


------------------------
[8] User1
    Some msg
------------------------

[8] User2
    Another message
------------------------

这是一个主要的div和几个子div还是像css样式的listitems或table等更简单的东西？如果没有最新的css3 / html5 / beta代码，请告诉我实现此布局的“正确”方法

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

我这样做： DEMO

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

将css作为：

.box {
position: absolute;
border: 2px solid grey;
}

.list {
line-height: 30px;
}

.list:not(:last-child) {
border-bottom: 1px solid red;
}

css / html创建论坛风格消息所必需的

4 个答案: