Wie kann ich List-Elemente mit CSS zusammenhalten?

Question

Das Skelett des HTML ist dies

<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> 

Die CSS

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

Die Wirkung I ist ein Bild oben bin, nachdem in meinem div mit Text nach rechts, wenn der Text länger links ist als das Bild, das es unter dem Bild umwickelt.

JEDOCH wenn die Liste rechts vom Bild beginnt, möchte ich, dass alle Objekte vertikal untereinander ausgerichtet sind, nicht für Listenelemente unterhalb des Bildes, die unter dem Bild erscheinen und die Liste in zwei Abschnitte aufteilen.

Ich brauche ein Bild Dienstprogramm skizzieren :)

Diese

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

nicht diese

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

Dank!

Answer 1

Sie könnten die <ul> zu

display: inline-block; 

Sie können auch Ihre Bilder clear: left; wollen gesetzt, da es möglich ist, dass sie nebeneinander in Abhängigkeit von den anderen Inhalten Aufstapeln beginnen konnten.

Answer 2

Fügen Sie margin-left zu Ihrem ul hinzu, das ist die Breite des Bildes (oder ein bisschen mehr).

Answer 3

ID sagen Sie das Bild als Hintergrundbild und geben Sie dann die UL oder Li einen Rand links. Stellen Sie sicher, dass Sie die Auffüllung und den Rand auf 0 zurückgesetzt haben, sonst wird die Ausgabe über den Browser differenzieren.