CSS实例分析
hanlray@gmail.comRevision: 1.0 Date:2006/08/26
<html>
<body>
<span id="span1">text1</span>
<div>
<p>text2</p>
</div>
<span id="span2">text3</span>
</body>
</html>
在default style sheet下，text1、text2、text3各占一行；现要使text1和text2在一行上，text3跟在另一行，如何用css实现呢？由于该例子是实际情况的一种简化，故不考虑该html代码是否有意义，当然也不能更改它。
把div变成inline-level element?这样div和两个span产生的三个inline boxes都会参与到body建立的inline formatting context上，因而按顺序水平排列，这样就把text1和text2放到了一行上，在想办法把text3放到另一行上就行了。不过这种做法是行不通的，显示结果仍然会是三行，因为div包含一个p element，它是一个block-level element，其containing block是body，body是一个block-level element，只能包含block boxes或inline boxes，因此会产生两个anonymous block box，分别包围两个span产生的inline boxes，而div是不会产生inline box的，因为它没有内容，这种情况在[这里 ]已经详细讨论过。这里不考虑把p也变为inline-level element的情况，因为div可能很复杂，其内容有其自己的CSS，比如是一个widget。
用float:left把div变成一个floated element如何？结果将是text1和text3占一行，text2跟在另一行，因为一个floated element前面的elements是不会受它影响的，因此text2会在text1下面另起一行；同时div由于变成floated element而脱离normal flow，body产生的block box只包含两个span产生的inline boxes，这两个inline boxes参与到一个inline formatting context中，按顺序水平排列，因此text1和text3在一行上。
要使text2和text1在一行，还应该把第一个span也变成floated element，不过这时text3还会和text1、text2在同一行，简单地用一个br可以把text3放置另一行，不过不能保证text3所在的box和text2所在的box重叠，两个floating boxes是不会重叠的，因此可以把第二个span也变成floated element，为了使之另起一行，应该先用clear:left清除left。最后的CSS为：
#span1 {
float: left;
}
div {
float: left;
}
#span2 {
clear: left;
float: left;
}
1499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
