添加d3js图表时出现三列布局中断

Question

我正在尝试创建具有页眉和页脚的三列布局。 我开始将div添加到第一列和第二列。 构建了前两列的页面。 一切看起来都很棒。 但是，一旦我在第三列中使用dimplejs添加D3.js图表，我的布局就会中断。 不知道如何破坏其他两列。

工作布局如下：

当我添加图表时，布局会中断。 https://i.stack.imgur.com/HcWp7.jpg

我创建了一个jsfiddle来解释我所看到的问题。

您可以认为我是d3js / dimplejs的新手。 我试图调查布局，div和类，但无法弄清楚我缺少什么。 我注意到图表容器似乎也被截断了，因为y轴并不完全可见。

任何帮助，将不胜感激。

Answer 1

正如@Temani Afif所提到的，我在类.column添加了vertical-align: top ，一切都神奇地起作用了。

这是工作的jsfiddle 。