老师这一块不是很明白

老师这一块不是很明白

# 具体遇到的问题
这是设置下图block-content的代码,我不太理解这1和2的样式为什么要这样设置
# 报错信息的截图

# 相关课程内容截图
http://img1.sycdn.imooc.com//climg/5facca6d09ca541507110432.jpg

http://img1.sycdn.imooc.com//climg/5facc999097f923d08430436.jpg

http://img1.sycdn.imooc.com//climg/5facca0109e7202b12630740.jpg# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里输入代码,可通过选择【代码语言】突出显示

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,老师这种写法是相对简单的。

1、.item盒子想要显示在一行,可以使用浮动,或者设置为inline-block元素

2、因为img是行内元素,div是块元素独立显示在一行。如果想要实现一行的效果

http://img1.sycdn.imooc.com//climg/5facfcac093e744f03440117.jpg

还需要修改布局,所有的div用一个大盒子包裹起来,图片设置浮动,div大盒子设置浮动。这样会更复杂,所以老师这样写是比较简单的。

祝学习愉快!

好帮手慕星星 2020-11-12 14:52:13

同学你好,问题解答如下:

1、.item设置浮动,是为了显示在一行。.item为块元素,默认独占一行垂直排列

http://img1.sycdn.imooc.com//climg/5facda6a0977a19504760467.jpg

设置浮动之后排列一行显示,遇到边界换行

http://img1.sycdn.imooc.com//climg/5facda8a09ebb87107640244.jpg

2、图片设置绝对定位是相对于父盒子.item来说的,定位在左上角,覆盖了.item留出的padding位置

http://img1.sycdn.imooc.com//climg/5facdaee092cf1b808640618.jpg

因为图片不占据padding值,默认从内容开始显示,左侧padding留着

http://img1.sycdn.imooc.com//climg/5facdb310958b2d404820192.jpg

所以进行了定位的设置。

知道老师的样式意思就好,如果不想按照老师这样写,可以按照自己的想法来写,最后能够实现效果就好。

祝学习愉快!

  • 提问者 小丸子不吃丸子 #1
    这个方法比较难理解有没有更简单的方法
    2020-11-12 14:54:01
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师