为了账号安全,请及时绑定邮箱和手机立即绑定

位置跟随的问题?

如下代码中,fisrt,second,third是3个inline-block元素,对于second元素加上absolute后确实
和老师说一样,还跟随在原来的位置;对于third元素来说,加上absolute之后,会跟在second元素
后面,但是与second元素之间的空格没有了,为什么?
因此,对于这个课程中图片的左上角VIP,不需要再i元素前放上注释符号也能实现。
<div class="father">
 <div class='first'>first</div> 
 <div class="second">second</div>
<div class="third">third</div> 
</div>
.father{
  background:gray;
}
.first{
  width:200px;
  height:200px;
  background:red;
  display:inline-block;
}
.second{
   width:200px;
  height:200px;
  background:yellow;
  display:inline-block; 
}
.third{
   width:300px;
  height:300px;
  background:blue;
  display:inline-block;
  
  
}


正在回答

1 回答

老师说了,空格是因为在DOM里的first和second和third都是通过回车分开的,而回车在页面里占据一个字符。当third设定为absolute后,third跳出文档流,它和second的之间的回车就被甩到后面去了。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

位置跟随的问题?

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号