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

为什么给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_ 2020-10-22 14:29
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 WPF 大屏看板表格背景图片设置
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是,这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示