3

何らかの理由で、line-height プロパティを使用して 13px 程度のように少し小さく設定すると、メイン テキストは常に最初の行で一番下の div に表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style>
            div.main{
                background-color:grey;
                width:500px;
                height:100px;
                text-align:justify;
                line-height:13px;   /* pfff */
            }
            div.pusher{
                float:right;
                height:40px;
            }
            div.bottom{
                float:right;
                clear:right;
                height:60px;
                width:100px;
                background-color:green;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="pusher"></div>
            <div class="bottom">
                    textaaaaa aaaa aaaa
            </div>
            We have yet, many other health products, as they are all beneficiary in some way, aroma therapy products can help you to get more relaxed,
                        relieve the stress and pain, they can help with a better sleep and even protect from mosquitos.
                        Our beverages are also completely natural, and will keep you fresh and in shape!
                        Everyone knows of the coffee benefits, the juices also have vitamins and are highly beneficial.
                        In the beverage section you can also find.
        </div>
    </body>
</html>

何か案は？

ここに画像の説明を入力

4

2 に答える 2

0

このバグの答えを見つけることができました。

プッシャーの高さは、行の高さの倍数である必要があります。例えば。39px;

その場合、意図したとおりにテキストが浮きます。次に、背景を透明にし、少しパディングを入れて、ラインアップを改善します。

于 2012-05-15T08:08:53.370 に答える
0

緑の div の周りにテキスト ラップ効果を作成しようとしていますか?

本文を左にフロートさせ、見栄えがよくなるように並べて配置し、両方の下に明確な両方のダイブを追加する必要があります。

これもチェックしてください http://css-tricks.com/all-about-floats/

編集：

プッシャーを緩め、緑色の div をメインの外に移動し、右にフロートさせ、負のマージンを使用して所定の位置に配置します。そして、メインの下にクリアの両ダイブを追加。

または、メインの div を相対位置に設定し、緑色の div を絶対位置に移動します

于 2012-05-15T07:42:20.553 に答える