关于Div+CSS布局

对于固定宽度的网页,应该使用flot的方式精确布局。
对于自由伸缩的网页,应该使用pisition来布局。


Float布局的方法很简单,宽高都是算好的,定死的。下面例子主要说明一下如何用Position的方法来布局。

<div style="position:relative;">
      <div style="position:absolute;  top:0; left:0; width:150px;  border:1px solid #369;">
          左边
      </div>
 
      <div style="position:absolute;  top:0;  right:0; width:120px;  border:1px solid #ccc;">
         右边
      </div>

      <div style="margin-left:155px;   margin-right:125px;  border:1px solid #f60;">
        中间的内容
      </div>
</div>

--------------------
这样,左右两列是固定不动的,中间的是自由伸缩,而且不会产生跳到下一行的问题。也不用进行clear的操作。

你可能感兴趣的:(关于Div+CSS布局)