« 《精通CSS+DIV网页样式与布局》一处勘误 | CSS调试技巧五则，兼谈“提问的艺术” »

回答读者提问(17) ——看似简单的问题其实不简单

使用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又该怎么写呢？

4,065

这篇文章发表于 2008年01月27日 星期日 10:10 pm，并被分类于你问我答。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。



欢迎您发表留言

(须填写)
(须填写,不公开)
请注意：这里输入的HTML代码会被屏蔽，如果需要讨论复杂的具体代码问题，请到我们的论坛发贴，谢谢！

9条留言