html - 将图像插入另一个 div 后 ul 菜单下降

Question

我在创建的应用程序中遇到了一个奇怪的问题。有一个大的div 和display:table 和一个div display:table-row。该行有 2 个 block ，aside 和 content 是 display:table-cell。在旁边有整个应用程序的 ul 菜单，在内容中有当前显示的内容。问题是，当我将图像添加到内容中时，旁边的整个菜单会被图像的高度下推。但是图像在不同的 block 中，它应该不能移动到一边。

我摆弄了问题，here .如您所见，旁边 block 的左侧有菜单，右侧有图像。我把它放在宽度为 200px 的 css 文件图像的底部，你可以更改它以查看问题。对于较小的值它什么都不做，但是当宽度在 50px 左右时它开始改变菜单。

如何消除这种影响？

Answer 1

添加vertical-align: top;放在一边

aside {
    background-color: #31383E;
    color: #989B9E;
    display: table-cell;
    overflow: hidden;
    vertical-align: top;
}