リスト項目をCSSを使用してまとめて取得するにはどうすればよいですか？

Question

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 

ありがとう！

Answer 1

あなたは<ul>それは、彼らが他のコンテンツに応じて、隣同士に積み重ね始める可能性がありますので、あなたはまた、あなたのイメージをclear: left;する場合があります

display: inline-block; 

にを設定することができます。

Answer 2

画像の幅（またはそれ以上）であるulにmargin-leftを追加します。

Answer 3

idイメージを背景イメージとして設定し、ulまたはliにmargin-leftを付けます。パディングとマージンを先に0にリセットしておくか、出力がクロスブラウザを区別するようにしてください。