老师,我想问一个问题!

老师,我想问一个问题!


<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <style type="text/css">

      *{padding: 0;margin: 0;font-family:"微软雅黑";}

      .main{width: 788px;border:1px black dashed;overflow: hidden;zoom: 1;margin:0 auto;padding: 10px;}

     /* img{width: 240px;height: 135px;}*/

      .one,.two,.three,.four,.five,.six{float: left;margin:10px;border:1px gray solid;width:240px;}

      p{line-height: 1.5em;margin-left: 20px; margin-bottom: 10px;}


    </style>

</head>

<body>

    <div class="main">

        

            <div>

                <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="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>


正在回答

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

3回答

你好同学 , 理解的是对的 .当设置浮动后 ,本应该在一行显示 ,但是容器只能放下三组图片 ,所以自然后面的就好挤下去 . 

祝学习愉快 ,望采纳 . 

提问者 张艳华zzz 2018-12-28 16:27:50

也就是说,我想让它变为三行两列,我只需要把最大的我这个main的盒子的宽度设置为只能放下两个小盒子的宽度,它就会变为三行两列排列了?

提问者 张艳华zzz 2018-12-28 16:24:02

是不是设置了最大的盒子的宽度,然后最大盒子的宽度只能放下三个小的盒子,所以从第四个盒子开始才又另换了一行,呈现出两行三列这样的效果,就例如我最大盒子的宽度设置为可以放下这六个盒子的宽度,这样就会直接排列成一行显示这六个盒子了?

  • 提问者 张艳华zzz #1
    也就是说,我想让它变为三行两列,我只需要把最大的我这个main的盒子的宽度设置为只能放下两个小盒子的宽度,它就会变为三行两列排列了?
    2018-12-28 16:27:13
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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