html - 两列 (div) 布局。左：固定且可滚动，带标题的文本，右：浮动，左侧文本中每个标题的图像

Question

为了用一些图像讲述一个故事，我想在左侧显示文本，可滚动，右侧应该理想地显示每个标题的图像。

我是初学者。我还没试过那么多。我知道如何进行两列设计，而不是如何将图像连接到可编辑文本中的标题/位置..

#content, html, body {
    height: 98%;
}
#left {
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: scroll;
}
#right {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: scroll;
}

我希望滚动浏览左栏中的文本并自动在右侧获取相应的图像...