css - DIV 内的图像超出其边界

Question

我不知道为什么会这样。我可以解决此问题的唯一方法是在文本之后放置大量中断，但显然这不是一个可接受的解决方案。

隔离的 CSS：

.center_column {
    max-width: 892px;
    float: left;
}

.content {
    width: 892px;
    background-color: #FFF;
    background-image: url("style/contentpost.png");
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 2px;
    border-color: #7699bb;
    border-radius: 10px;
}

.content_wrap {
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.text {
    width: 100%;
    margin-top: 20px;
    text-align: justify;
    text-justify: distribute;
    font-weight: normal;
    font-size: 16px;
}

独立的 HTML：

<div class="center_column">
    <div class="content">
        <div class="content_wrap">
            <div class="text">
                <img src="image">Text
            </div>
        </div>
    </div>
</div>

为什么会这样？谁能告诉我如何解决这个问题？先感谢您 ：）

Answer 1

这将强制浏览器计算包含浮点数的 div 的高度：

.text{
     overflow: hidden;
}

overflow:hidden此外，如果您出于某种原因不想要，请搜索 clearfix 。

Answer 2

看到你还没有完成整个布局。试试这个布局和风格..

<div class="center_column">
    <div class="content">
        <div class="content_wrap">
            <img class="pic" />
            <div class="text">TEXT</div>
        </div >
    </div>
    <div class="footer" >FOOTER</div>
</div>

将此添加到您现有的样式中

.pic {
    float:left;
}

.footer {
    clear: both;
}

FLOAT 实际上会浮动它之后的所有内容，向左或向右添加 CLEAR 将清除浮动问题。换句话说，结束浮动效果。

Answer 3

这是因为你的

float : left;

你需要添加这个

<div class="clear"></div>

在您的图像下方。

并将其添加到您的 css 文件中

.clear { clear : both; }

Answer 4

您可以在 CSS 中使用固定的图像宽度和高度，或者在 CSS 中使用背景位置和大小属性。

Answer 5

添加一个<div>清除浮动的：

<div class="center_column">
    <div class="content">
        <div class="content_wrap">
            <div class="text">
                <img src="image">Text
                <div style="clear: both;"></div>
            </div>
        </div>
    </div>
</div>

Answer 6

向左飘浮; 是你的问题，

添加 ：

<div class="clear"></div>

CSS：

.clear {
  clear: both;
}