我才12岁 ?

首先大家看一下下边这张图片：

这样的布局很常见，你会怎么安排呢？其实要做到这一点十分的简单，也有很多种方法，但是哪种方法最适合呢？

一、左右同一级别、同一性质

先看下结构：

<div>
    <div class="alignLeft"></div>
    <div class="alignRight"></div>
</div>

这是在 WordPress 里边使用的上一篇日志和下一篇日志的结构，左右都是日志，具有相同的重要性，我们可以在 css 文件中让 alignLeft 浮动在左侧，alignRight 浮动到右侧，这样子就可以轻松搞定了。

二、新闻类型的

先看下 CSSer 的首页的新闻列表：

新闻标题在左，日期在右，你会怎么写结构呢？SupeSite 给出的结构是这样的：

<li>
    <cite>新闻日期</cite> 新闻标题
</li>

而 CSS 定义是：

li cite { float:right;}

三、标题和右侧

先看下结构：

<div>
    <h2>这里是标题</h2>
    <span>这里是右侧文字</span>
</div>

在 CSS 中这么写：

div { width:400px; font-size:14px; overflow:hidden;}
h2 { font-size:14px; margin:0; padding:0; border-bottom:1px solid #0099FF;}
span { float:right;}

看一下现在的效果：

右侧的换行了，很奇怪，为什么上一个让左侧的浮动到右侧不会有这种情况，而让右侧的浮动到右侧就会出现这种情况呢？那是不是将右侧的浮动到左侧就可以使右侧的东西放到最左侧了呢？答案是否定的，你可以这么写试一下：

span { float:left;}

可是为什么会产生这种情况呢？不知道大家有没有看我翻译过的那篇文章：简单的通过CSS控制垂直居中，里边已经介绍了浮动的原理，而这个例子也更好的去验证了那个原理的正确性。在二的例子中，当 cite 没有浮动的属性时，它就是一个正常的元素，占据着它本该拥有的位置，然而，当它有了浮动的属性后，它将脱离原来的本性，成为一个虚无缥缈的东西（这说的有点散，哈哈），当它拥有左浮动的时候，如果它前边没有元素、或者前边是一个固定元素、或者也是一个左浮动的元素，那么它将守在原来的位置，而如果它前边是一个右浮动的元素，它将移动到这个元素之前的位置，而将自己的位置让给右浮动的元素。当它拥有右浮动的属性时，不管它后边的元素是什么，它都会让出自己的位置移至他们后边。

现在我们如果只写一个浮动就达到目的呢？很简单，让它的上 margin 为负：

span { float:right; margin-top:-15px;}

这样子就解决了问题，负的距离需要根据字体的大小、粗细以及边框等定，也可以按照自己的喜好去处理把。

然而，让它在右侧只能用浮动吗？当然不是，我们同样可以使用绝对定位来实现：

div { width:400px; font-size:14px; position:relative; height:20px; overflow:hidden;}
h2 { font-size:14px; margin:0; padding:0; border-bottom:1px solid #0099FF;}
span { position:absolute; right:0; top:0;}

这样子会不会更方便呢？

在这里可以看到整篇文章提到的例子。

这篇文章发布于 2008年08月5日，星期二，12:23，归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。