Div 왼쪽 이미지의 부분

Question

div 안에 다른 div가 몇 개 있습니다.

이 div의 오른쪽에 이미지를 배치하고 싶습니다.

모든 유형을 시도했습니다. float:left;clear:both; ....하지만 작동하지 않습니다.

Here 페이지의 전체 코드를 볼 수 있습니다.

파란색으로 표시된 div는 왼쪽에 표시되고 빨간색으로 표시된 img는 파란색 div의 오른쪽에 있어야합니다.

P. 이미지를 사용할 수 없으므로 대체 텍스트가 표시되지만 중요하지 않아야합니다.

Answer 1

float:left; ~ div#waycontact을 추가해야 구조체의 흐름에 포함될 수 있습니다. 왼쪽

업데이트 업데이트 예를 참조 here

Answer 2

플로트 #waycontact :

div#waycontact { 
    width:300px; 
    margin:20px 40px; 
    float: left; 
} 

그런 다음 왼쪽으로 #logo을 뜨고 #waycontact 일치하도록에게 margin-top을 제공 :

img#logo { 
    float: left; 
    margin-top: 20px; 
} 

것은 그런 추가직후 반품 <div> ,

<div style="clear: both;"></div> 

http://jsfiddle.net/ambiguous/CdqJk/1/

(아래 기존 하위 버전)

첫째을 HTML에 #waycontact 위 #id 이동 : 603,210은 수레를 청소합니다. 그런 다음 :

img#logo { 
    float: left; 
    margin-top: 20px; /* to match #waycontact[margin-top] */ 
} 
div#waycontact { 
    width:300px; 
    margin:20px 40px 20px 100px; 
} 

#waycontact에 margin-left:100px는 #logo을위한 충분한 공간을 확보하는 것입니다, 실제 마진 값은 로고 이미지가 정말 얼마나 큰지에 따라 달라집니다.

http://jsfiddle.net/ambiguous/CdqJk/

Answer 3

플로트 #waycontact 왼쪽. 다음 #content이

example