三列

单行三列

绝对定位

以下是引用片段：
#left { position: absolute; top: 0px;  left: 0px; width: 120px;  } 
#middle {margin: 0px 190px 0px 190px; } 
#right {position: absolute;top: 0px; right: 0px;  width: 120px;}

float定位
xhtml:

以下是引用片段：
<div id="wrap"> 
    <div id="column"> 
    <div id="column1">这里是第一列</div> 
    <div id="column2">这里是第二列</div> 
    <div class="clear"></div>/*用法web标准不建议，但是记住下面元素需要清除浮动*/ 
    </div> 
    <div id="column3">这里是第三列</div> 
    <div class="clear"></div>/*用法web标准不建议，但是记住下面元素需要清除浮动*/ 
</div>

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

以下是引用片段：
    <div id="center" class="column"> 
        <h1>This is the main content.</h1> 
    </div> 
    <div id="left" class="column"> 
        <h2>This is the left sidebar.</h2> 
    </div> 
    <div id="right" class="column"> 
        <h2>This is the right sidebar.</h2> 
    </div>

以下是引用片段：
body { 
    margin: 0; 
    padding-left: 200px;    /* LC fullwidth */ 
    padding-right: 190px;   /* RC fullwidth + CC padding */ 
    min-width: 200px;       /* LC fullwidth + CC padding */ 
    } 

.column { 
    position: relative; 
    float: left; 
    } 

#center { 
    width: 100%; 
    } 

#left { 
    width: 200px;           /* LC width */ 
    right: 200px;           /* LC fullwidth */ 
    margin-left: -100%; 
    } 

#right { 
    width: 190px;           /* RC width */ 
    margin-right: -100%; 
    } 


    /*** IE Fix ***/ 
* html #left { 
    left: 190px;            /* RC fullwidth */ 
    }

上一页  [1] [2] [3] 下一页