看似简单的问题其实不简单

使用CSS以后，读者会发现很多原来使用表格布局非常小儿科的问题，都变得不那么简单了。比如xiaoyh119读者希望实现一个如下的效果。

具体标题-1More

也就是在一行中，一个标题文字居左，又端放置另一个文字，以便制作一个详细内容的连接。这样的样式，如果使用表格表格布局非常简单，只要使用一个一行两列的表格就解决了，代码如下。

1 2 3 4 5

<table> <tr> <td>具体文章标题</td><td align="right">More</td> </tr> </table>

而如果使用CSS又该如何实现呢？首先我们仍顺着使用表格的思路，把左右两端的文字分别置入一个span标记中：

1 2 3 4

<h4 id="main-1"> <span class="title">具体标题-1</span> <span class="more">More</span> </h4>

那么CSS又该怎么写呢？为了能够使两个span中的文字在同一行中，因此一定要CSS中的浮动的性质来实现：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

#main-1 { font-size: 12px; width:300px; margin:0 auto; border:1px gray solid; }   #main-1 span.title{ float:left; }   #main-1 span.more{ text-align:right; display:block; }

这里首先将左边的文字设置为向左浮动，从而脱离标准流，这时它后面的文字会围绕它排列，从而使右边的“More”文字出现在同一行，但是为了使“More”文字位于最右端，就需要时这个span变为块级元素，这样它才会自动扩展，然后通过text-align:right使文字能够右对齐。

现在回头思考一下，我们上面的思路是仍然沿用了表格布局的思路进行的，那么进一步考虑一下，这个案例是否可以简化呢，实际上如果我们对HTML代码稍稍修改，就可以使CSS代码大幅度化简，首先把左右两端的文字交换一下位置：

1 2 3

<h4 id="main-1"> <span class="more">More</span>具体标题-1 </h4>

那么CSS又该怎么写呢？为了能够使两个span中的文字在同一行中，因此一定要CSS中的浮动的性质来实现：

1 2 3

#main-1 span.more{ float:right; }

可以看到，这种方法，代码就比前面的方法简单了很多。因此，这里例子代码很简单，但是从中可以看出一个很有用的道理，用CSS进行页面的设计和布局，无论是一个复杂的大布局，还是一个简单的小样式，关键实现要真正把CSS的核心原理搞懂，比如这里的“盒子模型”、“标准流”、“浮动”和“定位”等基本原理，都真正理解清楚。

今天先讲到这里，后面我们还会继续沿着这里的案例继续探索和深入，更好地理解CSS的奥妙。如果对这个案例感兴趣，但是对具体原理不是很理解的读者，建议您再仔细研究一下《CSS设计彻底研究》视频教程的第1~4课。

最后，在给读者朋友一个“思考题”，这是袁马飞读者提出的问题，他希望实现如下这个效果，也就是文字要分为左中右三段，左右两端分局左右两端，中间段靠着左段，并且要求，鼠标指针经过时，相应的列表行背景变色，有兴趣的读者可以考虑一下，应该如何实现呢？能够实现IE6/IE7/Firefox都兼容吗？必须使用Javascript吗？如果使用Javascript又该怎么写呢？