float의 압축 된 버전 : 왼쪽

간단한 문제처럼 보입니다.하지만 아직 해결 방법을 찾지 못했습니다. 나는 높이가 다를 수있는 일련의 div를 가지고 있는데, 일반적으로 같은 너비가 될 것이라고 생각합니다. 페이지가 크기가 조정될 때 기본적으로 가변 개수의 열을 생성하는 유동적 인 레이아웃을 원합니다. 왼쪽 플로트에 완벽합니다. 문제는 div가 다른 높이 일 때 요소 사이에 수직으로 많은 공백이 생기는 것입니다.float의 압축 된 버전 : 왼쪽

분명히 간단한 해결책은 나를 위해이 모든 작업을 수행 할 수있는 자바 스크립트를 작성하는 것입니다. 그러나 나는 css 해결책이있는 경우 그것에 의지해야하는 것을 싫어할 것이다.

다음은 간단한 예입니다 :

<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head> 
     <title>Simple Float Example</title> 

     <style type="text/css"> 
      .dv { border: solid 1px red; float: left; width: 300px; } 
     </style> 

    </head> 
    <body> 
     <div> 
      <div style="height: 40px;" class="dv"></div> 
      <div style="height: 20px;" class="dv"></div> 
      <div style="height: 60px;" class="dv"></div> 
      <div style="height: 20px;" class="dv"></div> 
     </div> 
    </body> 
</html>

당신은 페이지가 매우 좁은 때 기대하는 것처럼, 모든 것이 보이는 것을 볼 수 있습니다. div의 모든 스택. 페이지를 전체 크기로 확장하면 모든 것이 잘 보입니다. 그러나 2 열 또는 3 열이있을 때 얼마나 많은 여분의 공간이 있는지보십시오. 나는 이미지를 게시 할 것이지만 내 평판은 아직 그렇게 할 수 없다.

어쨌든, 나는 다양한 디스플레이 및 위치 설정을 실험했으며 실제로 원하는대로 할 수 없었습니다.

제안 사항? 감사!

-RP

출처

2011-04-13 Justavian

고정 값 대신 높이 백분율을 기준으로 생각 했습니까? 아니면 질문을 오해하고있는 것일 수도 있습니다. – Robert

로버트 - 실제로 그 높이는 그렇게 간단하지 않을 것입니다. 나는 픽셀 높이를 전혀 설정하지 않을 것이다. 오히려 높이는 내용에 따라 다릅니다. 너비 만 설정됩니다. 그래서 나는 백분율 높이를 할 수 없습니다 ... – Justavian