css常用布局多行多列

2024-07-11 08:24:33

字體：大中小

供稿：網(wǎng)友

CSS布局常用的方法：float : none | left | right
取值：
none :　默認(rèn)值。對象不飄浮
left :　文本流向?qū)ο蟮挠疫?
right :　文本流向?qū)ο蟮淖筮?
它是怎樣工作的，看個(gè)一行兩列的例子
xhtml:
<div id="warp">
<div id="column1">這里是第一列</div>
<div id="column2">這里是第二列</div>
<div class="clear"></div>
</div>
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 :　默認(rèn)值。無特殊定位，對象遵循HTML定位規(guī)則
absolute :　將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對于其最接近的一個(gè)最有定位設(shè)置的父對象進(jìn)行絕對定位。如果不存在這樣的父對象，則依據(jù) body 對象。而其層疊通過 z-index 屬性定義
fixed :　未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規(guī)范
relative :　對象不可層疊，但將依據(jù) left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置
它來實(shí)現(xiàn)一行兩列的例子
xhtml:
<div id="warp">
<div id="column1">這里是第一列</div>
<div id="column2">這里是第二列</div>
</div>
CSS:
#wrap{ position:relative;/*相對定位*/width:770px;}
#column1{ position:absolute; top:0; left:0; width:300px;}
#column2{position:absolute; top:0; right:0; width:470px;}
他們的區(qū)別在哪?
顯然，float是相對定位的，會(huì)隨著瀏覽器的大小和分辨率的變化而改變，而position就不行了，所以一般情況下還是float布局！
CSS常用布局實(shí)例
一列
單行一列
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;}

上一篇：CSS代碼屬性分組的寫法例子

下一篇：IE6下 vertical-align:middle 和 height 引發(fā)的邊框消失