老师麻烦检查一下 哪里需要改进 谢谢!

老师麻烦检查一下 哪里需要改进 谢谢!

<!DOCTYPE html>

<html>

<head>

     <meta charset="utf-8" > 

     <!-- 此处编写样式 --> 

     <style type="text/css"> 

     .one,.two,.three{float:left; 

                   margin:20px 40px; 

                   border:1px solid;

                     }

      .clear{clear:both;

            } 

      .four,.five,.six{  

                      float:left; 

                      margin:20px 40px; 

                      border:1px solid;

                      }

     </style>

</head>

<body>   

        <!-- 此处写代码 -->     

       <div class="both">  

       <div class="one">  

       <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">

       <p>欢迎到慕课网学习新知识</p>

       </div> 

       <div class="two"> 

        <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">

        <p>欢迎到慕课网学习新知识</p>

       </div>

        <div class="three"> 

         <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"> 

        <p>欢迎到慕课网学习新知识</p>

        </div>  

         <div class="clear"></div>

       <div class="four">  

       <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">

       <p>欢迎到慕课网学习新知识</p>

       </div> 

       <div class="five"> 

        <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">

        <p>欢迎到慕课网学习新知识</p>

       </div>

        <div class="six"> 

         <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"> 

        <p>欢迎到慕课网学习新知识</p>

        </div>

       </div>

       </div>

</body>

</html>


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

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

1回答
Steve007 2019-03-28 16:29:35

同学,你好。建议给最外层的大盒子设置一个边框,清除浮动放在第六个盒子的下面,如图:

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

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

祝学习愉快!

  • 提问者 Jokerjue #1
    老师我按照要求改了一下效果达到,但是我不太理解清除浮动在第六个盒子下面为什么能实现把6个盒子分成2行的效果 不是要在第三个盒子后清楚浮动才能归类成两行吗,麻烦老师了 谢谢
    2019-03-28 17:58:35
  • Steve007 回复 提问者 Jokerjue #2
    同学,你好。 当给both盒子设置宽之后,第四个盒子放不下就会自动被挤到第二行,因此可以达到分成两行的效果。给第六个盒子之后清除浮动,是为了清除前面六个盒子浮动的影响,让盒子可以撑开.both,从而达到加边框的效果。 祝学习愉快!
    2019-03-28 18:49:06
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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