Html 在下面的标题和文本中用两个单独的部分制作消息

对于一个消息系统，我需要有一个标题栏，它是一个整体，在左侧有关于谁发布的信息，然后在最右侧有一个徽章。下面是全文框

---

我曾经尝试过使用div和tables，但我对CSS完全不熟悉，感觉就像是把头撞在墙上。由于我的HTML和CSS都是令人伤心的尝试，请随意使用简单的示例。谢谢

使用

浮动：左和<代码>浮动：右侧

例如：

比如说：

<div>
    <span class="msgTitle">Some line of text</span>
    <span class="msgDate">Date info</span>
</div>


一行文字
日期信息

编辑：查看这个JSfiddle中的示例：
使用
float:left和<代码>浮动：右侧

例如：

比如说：

<div>
    <span class="msgTitle">Some line of text</span>
    <span class="msgDate">Date info</span>
</div>


一行文字
日期信息

编辑：查看这个JSfiddle中的示例：
这里是一个更容易访问的HTML5版本示例

HTML:

这里是一个HTML5版本的例子，它将更容易访问

HTML:

我已经试过几次了，但我需要一个更可靠的例子。这会使用两个div吗？还是两个表格部分？添加了我原始答案的编辑和一个例子。啊，使用，不知道这些是如何使用的。很好，我会处理这个问题，看看是否能把它处理得很好，谢谢。我之所以选择
元素，是因为它本身缺乏自动属性分配。如果你愿意，你可以改变你使用的元素。祝你好运。我已经试过几次了，但我需要一个更可靠的例子。这会使用两个div吗？还是两个表格部分？添加了我原始答案的编辑和一个例子。啊，使用，不知道这些是如何使用的。很好，我会处理这个问题，看看是否能把它处理得很好，谢谢。我之所以选择
元素，是因为它本身缺乏自动属性分配。如果你愿意，你可以改变你使用的元素。祝你好运。描述某物是什么的合理类名远比描述你想要它的位置的类名好+1这绝对是我所寻找的基础，我遇到的问题是背景颜色和边框。你能编辑它使MSG阅读器有一个坚实的背景和一个边框，下面的文字有相似的边框和不同的颜色吗？@总之，样式完全由你决定，你可以随意使用它。。不过，我已经用更多的样式更新了代码，您可以在这里看到：@SULTAN:beauty！太好了，非常感谢。：）如果可以使用HTML5元素，这将有助于提高可访问性。任何东西都使用div都会让有可访问性问题的用户很难使用。描述某物的合理类名要比描述你想要它的位置的类名好得多+1这绝对是我所寻找的基础，我遇到的问题是背景颜色和边框。你能编辑它使MSG阅读器有一个坚实的背景和一个边框，下面的文字有相似的边框和不同的颜色吗？@总之，样式完全由你决定，你可以随意使用它。。不过，我已经用更多的样式更新了代码，您可以在这里看到：@SULTAN:beauty！太好了，非常感谢。：）如果可以使用HTML5元素，这将有助于提高可访问性。使用div来处理所有事情会让有可访问性问题的用户很难使用。从可访问性和干净代码的角度来看，这个解决方案更有意义。标题应带有
-
标记，页面的各个块应设置在相应的
类型标记内（他在示例中使用了
。从可访问性和干净的代码角度来看，此解决方案更有意义。页眉应带有
-
标记，页面的各个块应设置在适当的
类型标记内（他在示例中使用
）。
<div class="msgBox">
    <div class="msgHeader">
        <div class="msgTitle">
            Title Here <small>date of post</small>
        </div>
        <div class="msgBadge">
            badge here
        </div>
    </div>
    <div class="msgBody">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, similique, quidem amet quia consectetur rerum ducimus blanditiis voluptatum labore animi neque cum repudiandae delectus placeat ut! Non, nihil animi temporibus.
    </div>
</div>

.msgBox{
    width: 100%;
}
.msgHeader{
    width:100%;
    display: inline-block;
}
.msgTitle{
    float:left;
}
.msgBadge{
    float: right;
}
.msgBody{
    color: #e00;
}

<article>
  <h3>
    <span class="user">
      <img class="icon" src="http://placehold.it/20x20" alt="user icon image | username">
      <span class="user_name">
        User Name
      </span>
      <span class="user_location">
        UserCity
      </span>
    </span>
    <span class="post_info">
      <span class="post_timestamp">
        Month, 30, 2014 00:00
      </span>
      <span class="post_count">
        Post: 0000
      </span>
    </span>
    <span class="post_badge">
      <a href="#">Badge</a>
      <a href="#">Badge</a>
      <a href="#">Badge</a>
    </span>
  </h3>
  <div class="post_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lacus risus. Donec in molestie augue, eu convallis ante. Sed quis molestie mauris, vel pulvinar nunc. Cras sit amet lobortis sem, et placerat leo. Curabitur id rutrum metus, eget lobortis nisl. Ut lobortis malesuada leo eu eleifend. Suspendisse laoreet ipsum nec interdum adipiscing.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lacus risus. Donec in molestie augue, eu convallis ante. Sed quis molestie mauris, vel pulvinar nunc. Cras sit amet lobortis sem, et placerat leo. Curabitur id rutrum metus, eget lobortis nisl. Ut lobortis malesuada leo eu eleifend. Suspendisse laoreet ipsum nec interdum adipiscing.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lacus risus. Donec in molestie augue, eu convallis ante. Sed quis molestie mauris, vel pulvinar nunc. Cras sit amet lobortis sem, et placerat leo. Curabitur id rutrum metus, eget lobortis nisl. Ut lobortis malesuada leo eu eleifend. Suspendisse laoreet ipsum nec interdum adipiscing.</p>
  </div>
</article>

article {
 background-color: grey;
  padding-bottom: 5px;
  border: 1px solid black;

}
article h3 {
   background-color: red;
   padding: 5px 10px;
  height: 25px;
  line-height: 20px;
  vertical-align: middle;
  border-bottom: 1px solid black;
  margin: 0;
  font-size: 1em;
}
article h3 span {
  margin: 0;
  padding: 0;
}
article h3 span.post_badge {
  float: right;
}
article div {
  margin: 10px;
}