html - 内部带有内联 block 的 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 的大小时它变得太小我希望出现水平滚动条。但是图像附近的标签反而下降了。如何防止这种影响？理想情况下，我也想对标签应用文本溢出:省略号效果，因此首先它会短接“...”，然后出现滚动条。但是当我设置小宽度时，我不知道如何防止标签“test”下降

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>