烦请老师检查(浮动3-5编程练习)另有一个问题

来源:3-5 编程练习

慕码人001272

2020-03-07 17:58:40

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>慕课网</title>

    <style type="text/css">

    *{margin:0;

     padding:0;}

    .content{width:810px;

             border-style:dashed;

             margin:0 auto;

            height:auto;

          

            font-family:"微软雅黑";

            line-height:24px;

            padding:20px;

    }

    .img01{float:left;}

    .img02{float:right;}

        .wenzi1{padding-left:20px;}

        .wenzi2{padding-right: 20px;}

    </style>

</head>    

<body>

    <div class="content">

        <img src="http://climg.mukewang.com/59c8742e0001bc9607120172.jpg" alt="" class="img01">

        <div class="wenzi1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</div>><br/><br/>

        慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言,包括基础课程、实用案例、高级分享三大类型,适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点,为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。<br/><br/>

        4月2日,国内首个IT技能学习类应用——慕课网3.1.0版本在应用宝首发。据了解,在此次上线的版本中,慕课网新增了课程历史记录、相关课程推荐等四大功能,为用户营造更加丰富的移动端IT学习体验。<br/><br/>

        <img src="http://climg.mukewang.com/59c874560001779307120172.jpg" alt="" class="img02">

        <div class="wenzi2">老师来自于各大IT公司重要技术岗位,拥有丰富的实战经验。语言平实、通俗易懂,更接地气,传授最有价值的经验之谈。课程内容注重实用性,不仅让学员通过学习能够做出产品,而且学习过程中掌握的方法技巧在实际工作中用得上,能够切实帮助学员提升工作技能。</div>><br/><br/>

        慕课网的绝大多数课程都经过了专业的后期制作,为课程内容匹配了个性化的视觉效果,帮助学员更好地理解课程内容,增加学习的乐趣。

    </div>

</body>

</html>

----------------------------------------------------

为什么我的类.wenzi1和.wenzi2设置了padding分别左右20px,但是却无法实现效果?另请老师检查代码总体上是否规范正确,谢谢!

写回答

1回答

好帮手慕星星

2020-03-07

同学你好,html布局和预留代码不一致,自己添加了div标签,

http://img.mukewang.com/climg/5e637576093e76a517890576.jpg

div是块级元素,会被浮动的图片遮盖住,但是图片浮动脱离文档流,不脱离文档流(文字位置还是被占据着),所以div中的文字环绕图片显示。即使给div设置了padding-left值,也是div的左边距,文字位置不动。

建议将div去掉,给图片设置外边距来实现图片和文字之间的间隙,例如:

http://img.mukewang.com/climg/5e63766509dd3fe813531016.jpghttp://img.mukewang.com/climg/5e63769409e6c6d006681126.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程