weixin_44347400
市民Z
2020-10-22 11:49
采纳率: 100%
浏览 84

为什么给id为d2的div设置高度后两边的div会下沉?

给id为d2的div设置高度后两边的div会下沉,不设置就正常显示

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
*{
padding:0px;
margin:0px;
box-sizing:border-box;
}
.base{
display: inline-block;
height:100%;
}
</style>
</head>

<body>
<div  style="text-align: center;width:400px;border:1px solid red;padding:10px;height:100px">
    <div id="d1" class="base">
        <div>文字</div><br/>
        <div>文字</div>
        </div>
        <div id="d2" class="base" style="width:0px;border-right:1px solid black"></div>
    <div id="d3" class="base">
        <div>文字</div><br/>
        <div>文字</div>
        </div>
</div>
</body>
<script>
</script>
</html>

图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • FengXM_
    FengXM_ 2020-10-22 14:29
    已采纳

    排列多个元素在一行时,也就是多个内联块元素并列时,就会导致块下沉,与baseline有关 ,设置vertical-align:top/middle/bottom就ok了

    点赞 评论
  • qq_33131171
    加金开发 2020-10-22 13:52

    !内边距 作怪
    解决方法 设置为0

    点赞 评论

相关推荐