请老师检查一下,有没有问题。

请老师检查一下,有没有问题。

对于下面的代码,我有两个问题:

1、效果显示的每个小模块的图片和模块的边框不是非常贴合,稍微有些偏差,应该怎么改进啊?

2、为什么img不加float:left,图片下面的文字为什么不会出现在图片的右边呢?按照学习的内容,应该会出现在右边才对。我不是很懂。


代码如下:

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <style text="text/css">
            #div-main{
                border-color:grey;
                border-style:dashed;
                border-width:2px;
                float:left;
                padding:10px 10px 10px 10px;
            }
            #block{
                border-color:grey;
                border-style:solid;
                border-width: 1px;
                float:left;
                margin:10px;
            }
            p{
                line-height: 18px;
                margin:0px;
                text-align: center;
            }
        </style>
</head>
<body>   
        <!-- 此处写代码 --> 
        <div id="div-main">
            <div id="block">
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
                <p>
                    欢迎来到慕课网学习新知识!
                </p>
            </div>
            <div id="block">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
                <p>
                    欢迎来到慕课网学习新知识!
                </p>
            </div>
            <div id="block">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
                <p>
                    欢迎来到慕课网学习新知识!
                </p>
            </div>
            <br>
            <div id="block">
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
                <p>
                    欢迎来到慕课网学习新知识!
                </p>
            </div>
            <div id="block">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
                <p>
                    欢迎来到慕课网学习新知识!
                </p>
            </div>
            <div id="block">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
                <p>
                    欢迎来到慕课网学习新知识!
                </p>
            </div>
        </div>
</body>
</html>


正在回答 回答被采纳积分+1

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

3回答
好帮手慕柯南 2020-03-05 10:23:03

同学你好!

  1. 你多写文字的本质还是增大了外层div的宽度

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

  2. 造成你和想像中效果不一样的原因是因为你的外层都添加了浮动

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

    去掉外层的浮动之后的效果

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

祝学习愉快~

好帮手慕柯南 2020-03-04 19:22:09

同学你好!

  1. 图片和边框模糊的问题,这里其实是中间的图片的裁剪不是很合适导致的。你可以给外层的div设置一个固定的宽度,不过这个方法治标不治本。最好还是重新裁剪图片。同学了解即可

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

  2. 文字没有在图片左侧的原因是最外层的div的宽度不够,被挤下去了。增大div的宽度就可以看到了

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

    效果:

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

  3. 你应该设置的是图片外层的div为浮动,所以没有效果

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

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~

  • 提问者 慕丝7446887 #1
    关于第二点,增大宽度是可以体现效果。但是我存在一个疑问,外层的div宽度本来是根据里面的子元素所决定的,那么即便不调整外层div的宽度,感觉也不应该被挤下去,会自适应的呀。 然后,我试过将图片下面的文字增多,发现,当文字的宽度超过图片宽度的时候,文字也会自动在图片的右侧显示,而不是一直都被挤在下面。这个操作我也没有调整外层div的宽度。所以感觉好像是跟文字的数量有一定的关系。
    2020-03-04 20:21:10
提问者 慕丝7446887 2020-03-04 16:40:11

上面口误,第二个问题应该是,为什么img加入了float:left,图片下面的文字为什么也不会出现在图片的右边呢?按照学习的内容,应该会出现在右边才对。我不是很懂。

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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