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>

无七 2017-08-02

源自：CSS网页布局基础 3-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;属性（重新计算高度）；祝学习愉快！

收起回答