开发者社区 问答 正文

一个关于 css布局的问题?

关于这种布局,为什么里面div2元素的boder不会让父元素宽度增加?要是给div1设置边框肯定会增加宽度,这种原理是什么?求高手解答一下。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    html.body{
      width:100%;
      height:100%;
    }
    .div1{
        width:33.33%;
        float:left;
       
    }
    .div2{
        height:150px;
        border:1px solid red;
    }
   
  </style>
</head>
<body>
   <div class="div1">
       <div class="div2"></div>
   </div>
  <div class="div1">
       <div class="div2"></div>
   </div>
  <div class="div1">
       <div class="div2"></div>
   </div>
</body>
</html>

代码在线浏览地址

展开
收起
杨冬芳 2016-06-08 14:28:00 1986 分享
分享
版权
举报
1 条回答
写回答
取消 提交回答
  • IT从业

    你没设置div2的宽度啊,他的盒子宽度(width+border+padding之和)就继承父元素的了,如果你给div1和div2的高度都是150,然后再给div2一个border,应该就能看出差距了。建议用chrome工具看

    2019-07-17 19:31:55 举报
    赞同 评论

    评论

    全部评论 (0)

    登录后可评论
问答分类:
问答标签:
问答地址:
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等