Come posso ottenere l'elenco elementi di stare insieme con i CSS?

Question

Lo scheletro del HTML è questo

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

Il CSS è

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

L'effetto Io sono dopo è un top immagine a sinistra nel mio div con testo a destra, se il testo è più lungo l'immagine si avvolge sotto l'immagine.

Tuttavia, se la lista inizia alla destra dell'immagine, voglio che tutti gli elementi siano allineati verticalmente sotto l'altro, non per le voci di elenco sotto l'immagine per apparire sotto l'immagine e rompere la lista in due sezioni.

Ho bisogno di un programma di utilità abbozzare un'immagine:)

Questo

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

Questa non

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

Grazie!

Answer 1

È possibile impostare la <ul> a

display: inline-block;

Si potrebbe anche voler clear: left; le immagini, dal momento che è possibile che possano iniziare a impilare fino accanto all'altro a seconda della altri contenuti.

Answer 2

Aggiungi un margin-left al ul che è la larghezza dell'immagine (o un po 'di più).

Answer 3

Id dire impostare l'immagine come sfondo-immagine e poi dare l'ul o li a margin-left. assicurarsi di aver ripristinare l'imbottitura e il margine a 0 prima o l'uscita differenzierà cross browser