1

私は次のHTMLを持っています

<div>
    <img id="image1"
         src="http://valleywag.com/assets/resources/2008/03/BlackGoogleLogo.jpg" 
         alt="Why doesn't this float correcly?"
         style="border-width: 0px; float: left;" />
    <div id="divText" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px;"
          class="txt-Normal">
        <div style="background-color: Green; color: White;">
            <p>
                <strong><span style="font-size: xx-large;">This is going to be big title</span></strong>
            </p>
            <ul>
                <li>
                    <span style="font-size: small;">Foo</span>
                </li>
                <li>
                    <span style="font-size: small;">Bar</span>
                </li>
                <li>
                    <span style="font-size: small;">FooBar</span>
                </li>
                <li>
                    <span style="font-size: small;">BarFoo</span>
                </li>
            </ul>
        </div>
    </div>
</div>

テキストは画像の周りに浮かびません。ブラウザはIEでもFirefoxでも構いません。

画像の周りに浮かぶようにこれを修正するにはどうすればよいですか?

4

5 に答える 5

4

画像に重なっている箇条書きについて話している場合は、画像の を増やすかmargin-right、リストを変更してlist-style-position: inside.

于 2008-12-11T03:17:35.390 に答える
2

IE6 と FireFox2 では、テキストが画像の周りに浮かんでいます。テストのために省略している CSS はありますか?

ここに私が見るものがあります：

例 1 http://img214.imageshack.us/img214/6906/ff2topie6bottomhz5.gif

あなたが提供した HTML の例はHTML ドキュメントにありますよね? もしそうなら、どのDoctypeを使用していますか?

すべてのテキストを画像の右側に揃えようとしている場合は、テキストのコンテナーも左にフロートさせる必要がある場合があります。これにより、次のような出力が生成されます。

両方の要素が浮いている http://img518.imageshack.us/img518/4619/bothfloatedsd7.gif

これを行うには、次のようにコードを変更します。

<div id="divText" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; float:left;" class="txt-Normal">
于 2008-12-11T03:12:06.227 に答える
1

<ul>タグでこれを試してください

style="margin-top: 70px"

代替テキスト

私はXPを使っているので、IE6しか持っていません.IE7は6よりも優れていると思います（少なくとも期待できます）。古いバージョンの IE では、ブロック レベルの要素がぎこちなく処理されますが、新しいバージョンではこれが改善されています。<p>ブロック レベルの要素は、タグのように、独自の完全な行を取る必要があります。どのタグがブロック レベルであるかを確認したい場合は、css に次の行を追加して簡単にピークを取得できます。

* {
border: 1px solid black;
}

または、Firefox 用のWeb 開発者アドオンをダウンロードしてください。これにはたくさんの便利なツールがあり、「ブロック レベルの要素を強調表示」機能が組み込まれており、要素の周りにさまざまな色の境界線が表示されます。

于 2008-12-11T03:51:49.657 に答える
0

Firefox2 では、テキストが画像の周りを回り込んで表示されます。問題をよりよく理解できるように、スクリーンショットを投稿していただけますか?

箇条書きが画像に重なっている場合 (私は気づいています)、私が提案できる最善の方法は、画像のマージンを右にするか、箇条書きのスタイルを無効にすることです。

于 2008-12-11T02:46:18.400 に答える
0

リストマーカーが余白に表示されるため、余白が崩れているのが原因だと思います。

を使用してみてください<ul style="margin-left: 291px;">。

于 2008-12-11T02:47:19.180 に答える