CSS实例分析2

来源：互联网发布：mac 文稿占用空间大编辑：程序博客网时间：2024/05/22 10:57

CSS实例分析

hanlray@gmail.com
Revision: 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;  }