中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

5. two column layout|兩列布局
讓我們實踐position:relative + position:absolute的理論，實現(xiàn)兩列布局。

example:
<div id="div-1">
 <div id="div-1a">this is the column-one</div>
 <div id="div-1b">this is the column-two</div>
</div>

#div-1 {
 position:relative;/*父元素相對定位*/
}
#div-1a {
 position:absolute;/*子元素絕對定位*/
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;/*子元素絕對定位*/
 top:0;
 left:0;
 width:200px;
}

注意，在這個例子中會發(fā)現(xiàn)父元素的高度不會隨著子元素的高度變化，所以如果父元素的背景和邊框需要定義一個足夠高的高度才能顯示出來。

6.float|浮動對齊
使用float定位一個元素有float:left;&float:right;兩種值。這種定位只能在水平坐標定位，不能在垂直坐標定位。而且讓下面的元素浮動環(huán)繞在它的左邊或者右邊。

example:
#div-1a {
 float:left;
 width:200px;
}

7.make two clumn with float|浮動實現(xiàn)兩列布局
如果讓一個元素float:left;另一個float:right;控制好他們的寬度，就能實現(xiàn)兩列的布局效果。

example:
#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

8.clear float|清除浮動
如果你不想讓使用了float元素的下面的元素浮動環(huán)繞在它的周圍，那么你就使用clear,clear有三個值，clear:left;(清除左浮動)，clear:right;(清除右浮動)，clear:both;(清除所有浮動)。

example:
<div id="div-1a">this is div-1a</div>
<div id="div-1b">this is div-1b</div>
<div id="div-1c">this is div-1c</div>

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

至此，這個css的定位部分就結(jié)束了，你可以動手體會體會加深印象。

出處：藍色理想
責任編輯：moby

上一頁 css元素定位 [1] 下一頁

◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論