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 here

<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

为什么你的图像在未被使用的情况下显示为内联块？试试（https://jsfiddle.net/t0ag2z5k/52/）：

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

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

1 个答案: