Html 如何将剖面与“显示为内联块”垂直对齐

我试图重新创建类似于此示例的内容，但是我的框最终会有不同的垂直对齐

我环顾四周，发现了这个问题，解决方案对我很有效。我很想知道我的案例和Mozilla的例子有什么不同

另外，很高兴知道为什么两个“infoSubPanel”div没有垂直对齐

提前谢谢

另外，我也看了一下，但第一个技巧对我很有帮助

p.p.S.对于这个例子的一部分，我也研究了这个问题

我已将代码粘贴到下面：

v0.01多节页
身体{
背景色：#EFEF；
字体系列：无衬线；
文本对齐：左对齐；
填充：20px 0 0 20px；
}
.mainsrc{
最大宽度：1500px；
保证金：1px；
}
.mainfo{
背景色：#D4FCD5；
最小宽度：495px；
最大宽度：1470px；
最小高度：100px；
边框：1倍双绿色；
}
.屏幕部件{
垂直对齐：顶部；
宽度：49%；
最大宽度：730px；
最小宽度：495px；
最小高度：450px；
边框：1px纯白；
背景#F7E7C4；
保证金：1px；
显示：内联块；
}
.图幅{
宽度：100%；
身高：66%；
边框：1px纯蓝色；
背景：浅蓝色；
}
.数据图{
宽度：100%；
身高：33%；
边框：1px纯棕色；
背景：米色；
}
.infoSubPanel{
最小高度：450px；
宽度：48%；
最小宽度：250；
显示：内联flex；
边框：1px纯棕色；
}
.可滚动文本框{
宽度：100%；
身高：100%；
最小高度：500px；
字体系列：Verdana、Tahoma、Arial、Helvetica、无衬线字体；
字体大小：100%；
溢出：滚动；
调整大小：无；
文本对齐：左对齐；
}
这里有非常重要的数据。。。
这里有一些图形
这里有一些图形
这里有一些图形
这里有一些图形
这里有一些图形
这里有图表和情节

这里有图表和情节

这里有图表和情节

这里有图表和情节

这里有图表和情节

一些信息和日期时间将在这里

一些信息和日期时间将在这里

一些信息和日期时间将在这里

一些信息和日期时间将在这里

一些信息和日期时间将在这里

一些信息和日期时间将在这里

废话废话废话
废话废话废话
废话废话废话
废话废话废话
废话废话废话
废话废话废话
废话废话废话
废话废话废话
废话废话废话
废话废话废话

我认为您只需要在css中添加这些更改

.infoSubPanel{
float:left
}
.scrollabletextbox {       
/* height: 100%; */remove this
/* min-height: 500px; */remove this
float: left;
}

我环顾四周，发现了这个问题和解决方案 对我来说很好。我很想知道有什么不同 在我的案例和Mozilla的例子之间

• 这是SO的离题问题。

另外，很高兴知道为什么这两个

infoSubPanel

div是 也没有垂直对齐

• 您正在使用

  inline flex

  ，它是一个类似

  inline block

  的内联元素，默认情况下具有

  vertical align:baseline

  ，将其设置为

  vertical align:top

---

正文{
背景色：#EFEF；
字体系列：无衬线；
文本对齐：左对齐；
填充：20px 0 0 20px；
}
.mainsrc{
最大宽度：1500px；
保证金：1px；
}
.mainfo{
背景色：#D4FCD5；
最小宽度：495px；
最大宽度：1470px；
最小高度：100px；
边框：1倍双绿色；
}
.屏幕部件{
垂直对齐：顶部；
宽度：49%；
最大宽度：730px；
最小宽度：495px；
最小高度：450px；
边框：1px纯白；
背景#F7E7C4；
保证金：1px；
显示：内联块；
}
.图幅{
宽度：100%；
身高：66%；
边框：1px纯蓝色；
背景：浅蓝色；
}
.数据图{
宽度：100%；
身高：33%；
边框：1px纯棕色；
背景：米色；
}
.infoSubPanel{
最小高度：450px；
宽度：48%；
最小宽度：250；
显示：内联flex；
边框：1px纯棕色；
垂直对齐：顶部
}
.可滚动文本框{
宽度：100%；
身高：100%；
最小高度：500px；
字体系列：Verdana、Tahoma、Arial、Helvetica、无衬线字体；
字体大小：100%；
溢出：滚动；
调整大小：无；
文本对齐：左对齐；
}