2

HTMLの骨組みはこちら

<div class="TwoCol">
<img src="imgurl"/>
<h1>A headline</h1>
<p>Some exciting text</p>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<p>More riveting text </p>
</div>

CSSは

.TwoCol img{
    float:left;
    padding-right:5px;
    border:none;
}
.TwoCol ul{
list-style-type:none;
}

私が求めている効果は、テキストが画像の下に折り返されている画像よりも長い場合、div 内の左上にテキストが右側にある画像です。

ただし、リストが画像の右側から始まる場合は、画像の下にあるリスト項目が画像の下に表示され、リストが 2 つのセクションに分割されるのではなく、すべての項目が互いに垂直に整列するようにします。

イメージ スケッチ ユーティリティが必要です :)

これ

IMG Headline
IMG Para1
IMG Item A
    Item B
    Item C
Para2

これではない

IMG Headline
IMG Para1
IMG Item A
Item B
Item C
Para2

ありがとう！

4

3 に答える 3

3

あなたはに設定することができ<ul>ます

display: inline-block;

clear: left;他のコンテンツによっては、画像が隣り合って積み重なっていく可能性があるため、画像も必要になる場合があります。

于 2009-04-15T13:11:40.733 に答える
0

idは、画像を背景画像として設定し、ulまたはliにマージン左を指定すると言います。事前にパディングとマージンを0にリセットしてください。そうしないと、出力によってクロスブラウザが区別されます。

于 2009-04-15T13:15:42.173 に答える