CSS:
#wrap{ width:100%; height:auto;} #column1{ float:left; width:40%;} #column2{ float:right; width:60%;} .clear{ clear:both;} position : static | absolute | fixed | relative 取值: static : 默認值。無特殊定位,對象遵循HTML定位規則 absolute : 將對象從文檔流中拖出,使用 left , right , top , bottom 等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象,則依據 body 對象。而其層疊通過 z-index 屬性定義 fixed : 未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規範 relative : 對象不可層疊,但將依據 left , right , top , bottom 等屬性在正常文檔流中偏移位置 它來實現一行兩列的例子 xhtml: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; width: 370px; } 兩行一列 body { margin: 0px; padding: 0px; text-align: center;} #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} #content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;} 三行一列 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; width: 370px; } #content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 兩列 單行兩列 #bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } #bodycenter #dv1 {float: left;width: 280px;} #bodycenter #dv2 {float: right;width: 410px;} 兩行兩列 #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: 410px;} 三行兩列 #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: 410px;} #footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 三列 單行三列 絕對定位 #left { position: absolute; top: 0px; left: 0px; width: 120px; } #middle {margin: 20px 190px 20px 190px; } #right {position: absolute;top: 0px; right: 0px; width: 120px;} float定位 xhtml: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:This is the main content.
This is the left sidebar.
This is the right sidebar.
CSS:
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
CSS:
#header{width:100%; height:auto;} #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;} 三行三列 xhtml:css:
wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
column1{ float:left; width:300px;}
column2{ float:right; width:476px;}
.clear{ clear:both;}
就是將一個npx寬的一張圖片在外部容器縱向重複,定位到兩列交錯的位置縱向重複,在視覺上產生了兩列高度一樣的錯覺