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

Question

我想使用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>

有(至少)两种可能性:

• 这个答案使用 float:right了float:left
• 这个答案使用 margin-left,position:absolute和left

以下哪个(或任何其他答案)是实现此布局的更好方法,为什么？

Answer 1

使用浮动解决方案.此处不应使用绝对定位,因为文本正在定位,布局取决于文本的大小.如果您的用户更改其浏览器以放大文本大小,则布局将变形.如果你正在为可访问性设计页面,你需要特别注意这一点(考虑使用%而不是px来表示大小),但一般来说,只有当它是你想要的唯一方法时才使用绝对定位.

理解如何正确使用花车的一个很好的资源是这篇炙手可热的杂志文章.我给它留了一会儿书签,我用它作为参考.

Answer 2

不需要position:absolute。float:left最适合这种情况。float:right也不需要。该解决方案是跨浏览器兼容的。它将适用于所有浏览器，包括怪异模式。让我知道这对您有何作用或者您是否需要任何更改。

检查工作示例http://jsfiddle.net/PyHGy/9

如果 HTML 顺序对您很重要，注释必须位于相应标题之后，那么我们需要添加position:absolute并.statusContainer调整 中的边距.titleContainer。这也是一个跨浏览器兼容的解决方案。

检查工作示例http://jsfiddle.net/PyHGy/8/

Answer 3

是的，您可以使用 css 实现您想要的效果，即：浮动。但是，您将需要指定块元素的宽度。

玩它。在最简单的水平上，将所有宽度设置为 50%（可能会更少，具体取决于填充）并在适用的情况下添加 float:left 和 float:right。