                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /網(wǎng)頁(yè)簡(jiǎn)單布局之結(jié)構(gòu)與表現(xiàn)原則

關(guān)于定位的問題

請(qǐng)問，在這一節(jié)中，在時(shí)間這一塊的定義，可否也改成float來定位，還是說一定要用position？

搖三搖

2016-01-13

源自：網(wǎng)頁(yè)簡(jiǎn)單布局之結(jié)構(gòu)與表現(xiàn)原則 2-1

關(guān)注問題我要回答

687

操作

收起

2 回答

全棧港
2016-02-12

我感覺position方便一些，使用絕對(duì)定位時(shí)，該元素已經(jīng)脫離了文檔流（不占位），設(shè)置偏移量時(shí)，若有定位祖先元素，會(huì)依據(jù)其最近的已定位獨(dú)顯元素為偏移量。

對(duì)demo01設(shè)置position：relative；對(duì)偏移元素span設(shè)置position：absolute；right：20px；top：10px；

如果用float，時(shí)間最好排在用戶名那

/*初級(jí)*/

.demo01{width:600px;?overflow:hidden}
.demo01?.left{?width:100px;?float:left}
.demo01?.left?.userPic{margin-left:20px}
.demo01?.right{?width:458px;?float:right;?padding:20px;background-color:?#EEF7FF;border:?1px?solid?#CCC}
.demo01?.right?h6{?margin-bottom:5px}
.demo01?.right?.pubTime{?float:right;color:#999;?margin-top:-8px}


<!---demo01----------------------------------->
<div?class="demo01">
<div?class="left">
<img?class="userPic"?src="images/head01.jpg"?width="50"?height="50"?/>
????????</div>
????????
????????<div?class="right">
????????<span?class="pubTime">10分鐘前</span>
????????<h6>櫻桃小丸子</h6>
??????<p>奧鵬教育是由教育部高等教育司2001年12月批準(zhǔn)立項(xiàng)試點(diǎn)，2005年4月正式批準(zhǔn)運(yùn)營(yíng)的遠(yuǎn)程教育公共服務(wù)體系，為遍布全國(guó)的學(xué)員提供學(xué)歷(專升本，高起專)和非學(xué)歷教育咨詢、報(bào)名、學(xué)習(xí)輔導(dǎo)、課程考試、交費(fèi)等7X24小時(shí)學(xué)習(xí)支持服務(wù)400-810-6736。</p>
????????</div>

但這種方式語義化不是很好，先顯示時(shí)間