inline-block为什么没有对齐而是换行了？

想要左右两个高度不同的div水平排列

然后我给两个div设置了display:inline-block,奇怪的是右边的div居然换行了，按理说两个div应该顶部对齐的啊？很疑惑这是为什么？

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="left">
    <p>这是为什么呢？</p>
  </div>
  <div class="right">
    <p>求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案求一个答案</p>
  </div>
</body>
</html>

CSS

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.left{
  display:inline-block;
  width:160px;
}
.right{
  display:inline-block;
  margin-left:180px;
}

实际效果

图片描述

期望效果

图片描述

在线demo

这个简单的小问题

阅读 6.6k

*{ margin:0; padding:0; box-sizing:border-box; } .left{ display:inline-block; width:160px; } .right{ display:inline-block; width: calc(100% - 180px); padding-left: 20px; } .left, .right{ vertical-align: text-top; }

inline-block为什么没有对齐而是换行了？

想要左右两个高度不同的div水平排列

然后我给两个div设置了display:inline-block,奇怪的是右边的div居然换行了，按理说两个div应该顶部对齐的啊？很疑惑这是为什么？

HTML

CSS

实际效果

期望效果

在线demo

你尚未登录，登录后可以

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

快开发完的Vue3项目要做SEO该如何处理？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？