                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /网页简单布局之结构与表现原则

关于定位的问题

请问，在这一节中，在时间这一块的定义，可否也改成float来定位，还是说一定要用position？

摇三摇

2016-01-13

源自：网页简单布局之结构与表现原则 2-1

关注问题我要回答

654

操作

收起

2 回答

全栈港
2016-02-12

我感觉position方便一些，使用绝对定位时，该元素已经脱离了文档流（不占位），设置偏移量时，若有定位祖先元素，会依据其最近的已定位独显元素为偏移量。

对demo01设置position：relative；对偏移元素span设置position：absolute；right：20px；top：10px；

如果用float，时间最好排在用户名那

/*初级*/

.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月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
        </div>

但这种方式语义化不是很好，先显示时间