Изображение внутри DIV выходит за его границы

Введите описание изображения здесь

Я понятия не имею, почему это происходит. Единственный способ, которым я мог бы исправить это, - это поставить кучу разрывов после текста, но, очевидно, это не приемлемое решение.

Изолированный 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>

Почему это происходит? Кто-нибудь может сказать мне, как это исправить? Заранее спасибо:)

6 2
html css

6 ответов:

Это заставит браузер вычислить высоту div, содержащего float: 

.text{
     overflow: hidden;
}

Также, google для clearfix, если вы не хотите overflow:hidden по какой-то причине.

7

Float: слева; это ваша проблема,

Добавить: 

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

Css: 

.clear {
  clear: both;
}
1

Смотрите, вы еще не закончили со всем вашим макетом. Попробуйте этот макет и стиль..

<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 оба, левый или правый, очистит плавающие проблемы. Другими словами, заканчивается эффект плавучести.

1

Это из-за вашего 

float : left;

Вам нужно добавить это

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

Под вашим изображением.

И добавьте это в свой css-файл 

.clear { clear : both; }
1

Вы можете использовать фиксированную ширину и высоту изображения в CSS или использовать свойство background position and size в CSS.

1

Добавьте <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>
1