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

這將強制瀏覽器計算包含float的div的高度：

.text{
     overflow: hidden;
}

此外，谷歌for clearfix，如果你不想overflow:hidden由於某種原因。

Answer 2

這是因為你的

float : left;

你需要添加它

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

在你的形象下面。

並將其添加到您的css文件中

.clear { clear : both; }

Answer 3

您可以在CSS中使用固定的圖像寬度和高度，或在CSS中使用背景位置和大小屬性。

Answer 4

添加一個清除浮動的<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 5

向左飄浮; 是你的問題，

添加：

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

CSS：

.clear {
  clear: both;
}

Answer 6

看到你還沒有完成整個布局。 試試這個布局和風格..

<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將清除浮動問題。 換句話說，結束浮動效果。