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

前端之家收集整理的这篇文章主要介绍了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>

有(至少)两种可能性:

> @L_502_1@ float:right,with float:left
> This answer uses margin-left,位置:absolute和left

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

解决方法

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

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

猜你在找的HTML相关文章