html - CSS - 图像容器 div 与图像大小不同

Question

我在容器 div 中有一个图像，下面是一个包含可以滚动的文本的 div。图像的大小可能会有所不同，因此图像的高度会根据所显示的图像而变化，即它并不总是像我的示例中那样为 400 x 200。

我的问题是，当文本滚动时，图像和文本应该在图像后面滚动的点之间有一个空间。这似乎是因为图像容器 div 与图像的大小不一样。

这个 JSFiddle 显示了问题 https://jsfiddle.net/t0ag2z5k/50/

谁能告诉我为什么会发生这种情况以及如何解决它？

下面的 CSS 代码...

#plotdetails {
    display: flex;
    flex-direction: column;
    float: left;
    width: 400px;
    z-index: 5;
    position: fixed;
    height: 100%;
}

#plotdetails #plot-img-container {
    display: inline-block;
}

#plotdetails #plot-img-container img{
    width: 400px;
    display: inline-block;
}

#details-text {
    padding: 0 20px 0 20px;
    overflow-y: scroll;
    flex: 1;  
}

这里是 HTML

<div id="plotdetails">
<div id="plot-img-container">
    <img src="http://placehold.it/400x200">
</div>
<div id="details-text">
    <h1>Lot's of words here....</h1>
</div>
</div>

Answer 1

为什么您希望您的图像在不被用作行内 block 时显示为行内 block ？尝试 ( https://jsfiddle.net/t0ag2z5k/52/ ):

#plotdetails #plot-img-container img{
    width: 400px;
    display: block;
}