2

ここに画像の説明を入力してください

なぜこれが起こるのか私にはわかりません。私がこれを修正できる唯一の方法は、テキストの後にたくさんの休憩を入れることですが、明らかにこれは許容できる解決策ではありません。

分離された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>

なぜこれが起こるのですか？誰かがそれを修正する方法を教えてもらえますか？前もって感謝します ：）

4

6 に答える 6

7

これにより、ブラウザはfloatを含むdivの高さを計算します。

.text{
     overflow: hidden;
}

overflow:hiddenまた、何らかの理由で必要がない場合は、clearfixをグーグルで検索してください。

于 2012-11-15T10:13:43.773 に答える
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を左または右の両方に追加すると、フローティングの問題が解消されます。つまり、フローティング効果を終了します。

于 2012-11-15T10:26:41.510 に答える
1

それはあなたのせいです

float : left;

これを追加する必要があります

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

画像の下。

そしてこれをcssファイルに追加します

.clear { clear : both; }
于 2012-11-15T10:14:33.593 に答える
1

CSSで固定の画像の幅と高さを使用するか、CSSで背景の位置とサイズのプロパティを使用できます。

于 2012-11-15T10:15:24.783 に答える
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>
于 2012-11-15T10:17:19.943 に答える
1

フロート：左; あなたの問題です、

追加 ：

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

css：

.clear {
  clear: both;
}
于 2012-11-15T10:21:07.897 に答える