我有一个图像 float 在横幅区域的左侧,它比我想要的横幅高,这是为了在不切断图像的情况下为文本增长留出空间。
当我将 overflow: hidden
应用到 .banner
时,横幅会清除图像而不是将其切断。
我理解为什么会发生这种情况,但我一直在努力寻找一种方法来获得预期的效果,但无济于事。请参阅下面的预期效果。
我已经尝试过各种方法,比如将图像与 div 放在一起并对其应用 overflow: hidden
但我似乎无法让它工作。
我确信答案就在眼前,但我只是没有看到。
我已将我的代码上传到 JSfiddle为您(使用更小的图像,以便您可以在结果窗口中看到效果)
提前致谢。
最佳答案
在这里我更新了你的JSFiddle这样你就可以看到结果了。
您必须使用 position: absolute;
从 Textflow 中取出图像。
有了这个,如果文本不够高无法显示全部,图像就会被截断。
关于html - overflow hidden 而不清除 float 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25380691/