html – 使用CSS实现这个布局float：left和float：right,或者使用CSS margin-left和position：absolute？

我想使用 HTML和CSS在主题左侧放置一些注释(例如下面的模型/图像中显示的’status’和’author’注释)：

我更喜欢CSS而不是基于表的布局.

应在标题之前(左侧)显示注释,如上所示.

在HTML中,注释应位于相应的标题之后,例如如下(因为与主题相关联的信息/内容通常是主题的标题之后)：

<h1>This is a section title</h1>
<div class="status">approved</div>
<div class="author">chris</div>
<p>This is some text. Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<h1>Different section title</h1>
<div class="status">rejected</div>
<p>Lorem ipsum.</p>

有(至少)两种可能性：

> This answer uses float：right,with float：left
> This answer uses margin-left,位置：absolute和left

这些(或任何其他答案)中的哪一个是实现此布局的更好方式,为什么？

解决方法

使用浮动的解决方案.绝对定位不应该在这里使用,因为正在定位文本,并且布局取决于文本的大小.如果您的用户更改浏览器以放大文本大小,则布局将变得失真.您需要特别注意这一点,如果您正在设计页面的辅助功能(考虑使用％而不是px的大小),但一般来说,只有当它是唯一的方式来做所需的时候才使用绝对定位.

了解如何正确使用浮标的一个很好的资源是this smashing magazine article.我把它添加了一段时间后,我用它作为参考.