어떻게 목록 항목을 CSS를 사용하여 함께 유지할 수 있습니까?

Question

되는 HTML의 골격은 텍스트가 긴 경우, CSS 난 후 오전 효과는 오른쪽에 텍스트로 내 사업부 내 왼쪽 이미지 상단입니다

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

인이

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

입니다 이미지 아래에 감싸는 이미지보다

그러나 목록이 이미지의 오른쪽부터 시작하면 이미지 아래에있는 목록 항목이 아닌 아래쪽으로 모든 항목을 수직으로 정렬하고 목록 아래 두 부분으로 나누기를 원합니다.

나는 유틸리티 :

이

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에 여백을 남겨 둡니다. 패딩과 여백을 0으로 재설정했는지 확인하십시오. 그렇지 않으면 출력이 크로스 브라우저를 구별합니다.