DIV+CSS布局淬炼

  

1.  float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，

     在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是

     何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

2.  创建两列自适应宽度DIV

        #left   {width :30%; height :200px; float :left }
        #right {width :70%; height :200px;float :left  }

3.  创建一列固定宽度，一列自适应的两个DIV    

               

       设置左列向左浮动，另外一列既不设置宽度也不设置浮动。该段代码在IE下测试通过，但是在FireFOX下style2会下移。

       (但我测试却没有问题，和基本一致)

       #left {width :300px;height :200px; float :left ; }
       #right {height :200px; }

       如果在FireFox中不正常显示，需要修改代码。增加margin-left属性设置左边距和左列宽度相等。如下：

      #left{width :300px; height :200px;float :left ;}
      #right{height :200px;margin-left :300x;}

4.实现三列，左右两列固定，中间一列自适应

    设置左右列的分别为向左和向右浮动，中间为不浮动

    #left{width :300px;height :200px;float :left ;}
    #center{height :200px;}
    #right{width :300px;height :200px;float :right ;}

    DIV需要设置的顺序为左，右，中