我可以使用overflow：隐藏没有明确的高度吗？

Question

我有float:left的图像，我希望它溢出其父级，但切断了溢出。这是没有任何overflow规则的情况：

这就是我想要的：

这是一个小提琴：http://jsfiddle.net/ZA5Lm/

For some reason，决定overflow:hidden没有明确的高度会导致元素增长。

如果不设置明确的高度，我可以以某种方式实现我的效果吗？显式高度不起作用，因为我希望此div根据内容长度和浏览器宽度自动调整大小。

Answer 1

在我看来，使用溢出：隐藏而没有设置尺寸没有意义。如果您不想指定容器的高度，并且如果您的图片具有固定宽度，则可以使用此解决方案：http://jsfiddle.net/ZA5Lm/11/

图片以绝对定位，将其从文本流中取出。但是 - 而且我知道这可能很难看 - 你需要指定一个左边的填充来将文本移离图像。

Answer 2

这有点棘手（我使用相对+绝对定位和特定填充来定位文本），但它可以在不更改标记或设置height的情况下实现您所要求的效果：

body {
    padding: 10px;
}
img {
    float: left;
    position: absolute;
    left : 10px;
}
div {
    border: 1px solid black;
    padding: 10px 10px 10px 280px;
    position : relative;
    overflow: hidden;
}

我刚插入样式（即使不再需要float:left）

Answer 3

我在CSS-Tricks上看了一篇帖子，并谈到了这一点。去看看 - http://css-tricks.com/minimum-paragraph-widths/

可能有用:)祝你好运

另外只是查看了你的代码，我添加了float：右边的div，所以它看起来像这样 -

div {
border: 1px solid black;
padding: 10px;
float: right
/*overflow: hidden;*/
}

不确定这是不是你想要的？