Div Float 문제 : Divs가 자동으로 지워진 것처럼 보입니다. 왼쪽

Question

나는 일련의 이미지가 모두 width:400px이지만 높이가 다양합니다. 그들은 다음 컨테이너에 있습니다

{float:right;clear:right;margin:2px}

:

{float:left;clear:left;margin:2px}

모든에도 이미지는 다음과 같은 코드를 가지고 :

#content {width:808px;margin:0 auto;margin-top:100px}

모든 ODD 이미지는 다음과 같은 코드를

이론상 모든 ODD 이미지가 왼쪽에 있지 않아야합니다. , 서로 겹쳐진 온탑 (ontop)과 모든 EVEN 이미지가 서로의 위에 겹쳐 져야합니다. 오른쪽

그것은 오른쪽에있는 이미지의 일부처럼의 clear:left 또는 clear:both됩니다

대신 나는이 얻을?

의견이 있으십니까?

감사

Answer 1

포획, 예를 들어,이 코드 : (?) 당신이 비행기의 위쪽 줄을 츄바카의 상단을 기대하지 않을 것이다

<div>Airplane</div> 
<div style="float: left;">Symba</div><div style="float:right;">Chewbacca(?)</div> 

! 그것은 Symba의 꼭대기와 일렬로 나란히있을 것입니다.

Symba에는 왼쪽으로 플로팅이 있기 때문에 비행기 아래로 가야합니다. 비행기가 떠 다니는 지 아닌지는 더 이상 중요하지 않습니다.

플로트를 적용하여 원하는대로 할 수있는 레이아웃을 보았습니다. 모든 요소에 왼쪽을두고 페이지가 완료되면 공백을 정리하기 위해 일부 자바 스크립트를 사용합니다 (float : 자체 원점에 남김 당신이 이미 알아 차렸을지도 모르듯이). 당신은 항상에 열을 원하는 경우

<div style="float:left"> 
<div>Myst(?)</div> 
<div>Airplane</div> 
<div>Symba</div> 
</div> 
<div style="float:right"> 
<div>Coastline</div> 
<div>Painter</div> 
<div>Chewbacca(?)</div> 
</div> 

을하지만 : 그 해결책 자신을 좋아하지 않아,하지만 내가 생각할 수있는 유일한 대안은 두 개의 열까지의 이미지를 미리 정렬하고, 적절하게 분할 당신이 이미지의 높이를 미리 알지 못한다면, 당신과 같은 높이가 될 수도 있습니다. 그리고 그것을 기반으로 기둥에 물건을 넣을 수 있습니다. (루프 오버, 현재 높이의 집계를 유지하고 항상 더 짧은 열에 추가하십시오.)