2

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

----------------------
[8] 用户 1
    一些味精
----------------------

[8] 用户 2
    另一条消息
----------------------

这是 1 个主 div 和几个子 div 还是更简单的东西，例如 css 样式的列表项或表格等？请让我知道在没有最新 css3/html5/beta 代码的情况下实现此布局的“正确”方法

4

4 回答 4

4

一个例子：

<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>
于 2013-04-23T04:25:25.857 回答
1

像这样的东西会起作用：

<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 */
}

根据需要进行修改。

于 2013-04-23T04:21:31.773 回答
0

我会为每对作者信息 + 消息使用一个 div，然后，在每个内部它会是某种浮动左 div，用于包含作者信息（用户名、头像等）的框（正如通常在论坛上看到的那样，但是样式由您决定）以及另一个包含链接消息的 div。

于 2013-04-23T04:18:01.777 回答
0

我是这样做的： 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;
}
于 2013-04-23T05:03:31.913 回答