2-13练习题老师帮忙看下

2-13练习题老师帮忙看下

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    #content{
        width:800px;
        margin:0 auto;
    }
    .one{
        width:800px;
        background:blue;
        float:left;
    }
    .one .left{
        width:400px;
        float:left;
    }
    .one .right{
        width:400px;
        float:left;
    }
    .one_one{
        padding:20px;   
    }
    .two{
        width: 800px;
        float: left;
        background: pink;
    }
    .two .left{
        width: 266px;
        float: left;
    }
    .two .middle{
        width: 266px;
        float: left;
    }
    .two .right{
        width: 267px;
        float: left;
    }
    .two_two{
        padding:34px;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div id=content>
      <div class="one">
        <div class="left">
        <div class=one_one>
            <img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
        </div>
        </div>
        <div class="right">
        <div class=one_one>
            <img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">
        </div>
        </div>
      </div>
      <div class="two">
        <div class="left">
        <div class="two_two">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
        </div>
        </div>
        <div class="middle">
        <div class="two_two">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">
        </div>
        </div>
        <div class="right">
        <div class="two_two">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">
        </div>
        </div>
      </div>
  </div>
</body>
</html>


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

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

5回答
好帮手慕糖 2017-08-03 13:46:43

该题中页面的效果是正常的,视觉效果看不出来塌陷的,但若你再添加其他内容就会发现这个问题。本题中,这样是没有问题的,这里记住子级元素浮动,易给父级造成高度塌陷既可以了(这样以后再遇到类似的问题,就知道怎么回事了呀),祝学习愉快!

qq_天天_66 2017-08-03 10:43:05

我昨晚经历了什么,怎么打了那么多的错误结论,不是nav,是你的最外层div

昨天我肯定经历了什么。。。。。

好帮手慕糖 2017-08-03 10:19:48

你好,content高度是塌陷的(由于子元素的浮动引起的),就较本题来说效果实现还可以,但上代码要注意一点,id名content与类名one_one均缺少引号,请认准检查。但若要有其他布局,可能会有影响,这里可以清除下浮动,或者给content元素添加 overflow: hidden;属性(重新计算高度);祝学习愉快!

  • 提问者 无七 #1
    效果实现后 怎么样去看高度有没有塌陷呢?因为在页面上的效果是正常的呀。。
    2017-08-03 12:44:46
qq_天天_66 2017-08-03 10:16:59
qq_天天_66 2017-08-02 23:27:36

兄弟,你的nav容器,高度塌陷了,要使用清除浮动,否则会影响下面的布局

  • 提问者 无七 #1
    你说的nav是指上半部分的div嘛? 我加了个border看了一下是正常的哎..
    2017-08-03 08:37:39
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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