Question

我的横幅区域左侧浮动的图像高于我想要横幅的高度，这样就可以在没有图像切断的情况下为文本留出空间。

before overflow: hidden is applied

当我将overflow: hidden应用于.banner时，横幅会清除图像而不是将其剪切掉。

after overflow: hidden is applied

我理解为什么会发生这种情况，但我一直试图找到一种方法来获得所需效果但无济于事。请参阅下面的预期效果。

the desired effect

我尝试了各种各样的事情，例如将图像放入div并应用overflow: hidden但我似乎无法使其工作。

我确信答案是正确地盯着我，但我只是没有看到它。

我已将代码上传到JSfiddle（图片小得多，因此您可以在结果窗口中看到效果）

提前致谢。

Answer 1

在这里，我更新了您的JSFiddle，以便您可以看到结果。您必须使用position: absolute;将图像从Textflow中取出。如果文本不够高，无法显示，那么图像就会被切断。

Answer 2

如果您知道图片的宽度，可以这样做：http://codepen.io/pageaffairs/pen/EcJAK

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.banner {
    margin-top: 35px;
    background: #f00;
    overflow: hidden;
    position: relative;
}

.banner img {
    position: absolute; top: 0; left: 0;
}

.caption {
    margin-left: 230px;
    padding: 20px;
    font-size: 14px;
}

</style>
</head>
<body>

<div class="banner">
    <div class="image">
        <img src="http://placehold.it/220x300" alt="" />
    </div>
    <div class="caption">
        <h2>Lorem ipsum dolor sit amet.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores dicta est, iure libero molestias pariatur. Aperiam aut autem consequatur, deleniti et eum minus nihil perspiciatis provident qui repellendus veniam voluptatem. Aliquid assumenda atque consequatur cumque nesciunt sequi. Adipisci autem cumque iste itaque laudantium necessitatibus optio possimus quam sint vero!</p>
    </div>
</div>

</body>
</html>

Answer 3

您可以选择2个选项：

1。将浮动应用于图像的DIV而不是图像本身，并将DIV的高度限制为所需的最小高度。

示例：

    .image{ float:left; height:1px; }

JSfiddle示例：http://jsfiddle.net/z3zfx7uv/

2。完全摆脱图像及其DIV并使用背景图像，并使用适当的填充左侧。

示例：

    .banner {
        margin-top: 35px;
        background: #f00 url(http://placehold.it/220x300) top left no-repeat;
        overflow: hidden;
        padding-left:220px;
    }

JSfiddle示例：http://jsfiddle.net/b6zzbowh/

隐藏溢出而不清除浮动元素

3 个答案: