html - 内部带有内联块的div的溢出自动

Question

我有下一个标记：

<div style="border: 1px solid black; width: 200px; height: 60px; overflow-x: auto">
    <img src="/images/thumbs/doc.png" width="100" height="60" style="display: inline-block; vertical-align:middle;">
    <div style="display: inline-block; vertical-align: middle;">test</div>
</div>

实际上我使用 jquery ui resizable 插件。当我调整外部 div 的大小并且它变得太小时，我希望出现水平滚动条。但相反，图像附近的标签会下降。如何防止这种影响？理想情况下，我也想对标签应用 text-overflow:elipsis 效果，所以首先它会缩短为“...”，然后出现滚动条。但是当我设置小宽度时，我无法弄清楚如何防止标签“测试”下降

Answer 1

我认为您想在外部 div 中使用样式

空白：nowrap；

<div style="border: 1px solid black; width: 200px; height: 60px; overflow-x: auto; white-space: nowrap;">
    <img src="/images/thumbs/doc.png" width="100" height="60" style="display: inline-block; vertical-align:middle;">
    <div style="display: inline-block; vertical-align: middle;">test</div>
</div>