DIV CSS 佈局教程網

CSS布局常用的方法

    1、float:none|left|right
    取值：
    none:?默認值。對象不飄浮
    left:?文本流向對象的右邊
    right:?文本流向對象的左邊

    /*這是違背web標准意圖的，只是想說明在它下面的元素需要清除浮動*/

    CSS代碼:
    #wrap{width:100;height:auto;}
    #column1{float:left;width:40;}
    #column2{float:right;width:60;}
    .clear{clear:both;}

    2、position:static|absolute|fixed|relative
    取值：
    static:?默認值。無特殊定位，對象遵循HTML定位規則
    absolute:?將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義
    fixed:?未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規范
    relative:?對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置

    CSS代碼:
    #wrap{position:relative;/*相對定位*/width:770px;}
    #column1{position:absolute;top:0;left:0;width:300px;}
    #column2{position:absolute;top:0;right:0;width:470px;}

    他們的區別在哪？
    顯然，float是相對定位的，會隨著浏覽器的大小和分辨率的變化而改變，而position就不行了，所以一般情況下還是float布局！

    CSS常用布局實例
    單行一列
    body{margin:0px;padding:0px;text-align:center;}
    #content{margin-left:auto;margin-right:auto;width:400px;}
    兩行一列
    body{margin:0px;padding:0px;text-align:center;}
    #content-top{margin-left:auto;margin-right:auto;width:400px;}
    #content-end{margin-left:auto;margin-right:auto;width:400px;}
    三行一列
    body{margin:0px;padding:0px;text-align:center;}
    #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
    #content-mid{margin-left:auto;margin-right:auto;width:400px;}
    #conte

nt-end{margin-left:auto;margin-right:auto;width:400px;}
    單行兩列
    #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
    #bodycenter#dv1{float:left;width:280px;}
    #bodycenter#dv2{float:right;width:420px;}
    兩行兩列
    #header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
    #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
    #bodycenter#dv1{float:left;width:280px;}
    #bodycenter#dv2{float:right;width:420px;}
    三行兩列
    #header{width:700px;margin-right:auto;margin-left:auto;}
    #bodycenter{width:700px;margin-right:auto;margin-left:auto;}
    #bodycenter#dv1{float:left;width:280px;}
    #bodycenter#dv2{float:right;width:420px;}
    #footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}

 

    單行三列
    絕對定位
    #left{position:absolute;top:0px;left:0px;width:120px;}
    #middle{margin:0px190px0px190px;}
    #right{position:absolute;top:0px;right:0px;width:120px;}

    float定位一
    xhtml代碼:
        
    這裡是第一列
    這裡是第二列
/*用法web標准不建議，但是記住下面元素需要清除浮動*/
    這裡是第三列
    /*用法web標准不建議，但是記住下面元素需要清除浮動*/
    CSS代碼:
    #wrap{width:100;height:auto;}
    #column{float:left;width:60;}
    #column1{float:left;width:30;}
    #column2{float:right;width:30;}
    #column3{float:right;width:40;}
    . clear{clear:both;}
    float定位二xhtml代碼：
    CSS代碼：
    body{
    margin:0;
    padding-left:200px;/*LCfullwidth*/
    padding-right:190px;/*RCfullwidth CCpadding*/
    min-width:200px;/*LCfullwidth CCpadding*/

    }
    .column{
    position:relative;
    float:left;
    }
    #center{
    width:100;
    }
    #left{
    width:200px;/*LCwidth*/
    right:200px;/*LCfullwidth*/
    margin-left:-100;
    }
    #right{
    width:190px;/*RCwidth*/
    margin-right:-100;
    }