3-2练习

3-2练习

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

        <style type="text/css">

        *{margin:0;padding:0;}

            

            .border{width:806px;

                height: auto;

                border:1px dashed blue;

          }

            

            .left{float: left;

                border: 1px solid grey;}

            .right{clear:both;}

            

            .left{margin:20px;}

            


        </style>

</head>

<body>   

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

        <div class="border"> 

        <div class="top">

            <div class="left">

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

            <p>慕课只学有用的</p>

            </div>

            <div class="left">

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

            <p>慕课只学有用的</p>

            </div>

            <div class="left">

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

            <p>慕课只学有用的</p>

            </div>

            </div>

            <div class="top">

            <div class="left">

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

            <p>慕课只学有用的</p>

            </div>

            <div class="left">

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

            <p>慕课只学有用的</p>

            </div>

            <div class="left">

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

            <p>慕课只学有用的</p>

            </div>

            <div class="right">

                

            </div>

            </div>

        </div>

</body>

</html>

盒子计算出来806PX宽   MARGIN填充20PX,为什么盒子宽还不够,还是写错了,老师

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

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

2回答
怎么都被占用了呢 2017-08-14 10:08:51

http://img1.sycdn.imooc.com/climg//599105ae0001037403750140.jpg,846=240(图片宽度)*3+1(边框宽度)*6+20(外边距)*6

想取的名字都被占了 2017-08-14 10:08:41

算错了,相邻的两个margin的宽度不会重叠在一起,所以盒子宽度应该再加40,改成846试试。

  • 提问者 夜景阑珊 #1
    可以的,能加个好友一起学不
    2017-08-14 10:55:09
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星

相似问题

登录后可查看更多问答,登录/注册

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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