인쇄용 3 텍스트 div의 최적 레이아웃

Question

각 페이지에 "a" "b"및 "c"섹션이 포함 된 약 500 페이지의 책을 씁니다. 각 페이지에서 각 섹션의 내용 길이가 다릅니다. 예를 들어 1 페이지에서 긴 "a", "b"및 짧은 "c"가있을 수 있습니다. 2 페이지에는 중간 "a", 짧은 "b"및 긴 "c"등이있을 수 있습니다.

각 페이지의 각 섹션 내용은 HTML 형식으로 제공됩니다.

페이지 영역을 효율적으로 사용하도록 페이지의 섹션을 레이아웃하고 싶습니다. NON 효율적인 레이아웃의 예가 다음과 같습니다.

aaa bbb ccc 
aaa  ccc 
aaa  ccc 
     ccc 
     ccc 

알 수 있듯이 많은 낭비되는 영역이 있습니다.

우선, I는 예를 들어, 콘텐츠 길이에 따른 열 폭을 제어하려고 :이

aaa b ccccc 
aaa b ccccc 
aaa b ccccc 

그러나 열 "B"가 너무 좁 읽기 어렵 더 효율적이다.

내가 시도한 또 다른 것은 너비를 일정하게 유지하지만 "float"레이아웃을 사용하는 것입니다. , a가 b보다 훨씬 긴 경우

• : 난 단지 두 개의 열이 있다면

  aaa bbb 
  aaaaaa 
  

  , 이것은 매우 간단 할 수있다 : 예를 들어, 내가 열만 "A"와 "B"가 있다고 가정 그런 다음 b를 오른쪽으로 띄우십시오.

• b가 a보다 훨씬 긴 경우 float을 왼쪽으로 만듭니다.
• 거의 같은 길이라면 두 개의 인접한 열로 만듭니다.

그러나 가능한 조합이 많기 때문에 3 개의 열이있는 경우 훨씬 더 복잡해집니다.

이 문제의 일반적인 해결책이 있습니까?

Answer 1

jQuery Masonry을 살펴볼 수 있습니다. 네가 정확히 찾고있는 것이 아니 겠지만 도움이 될지도 모른다.