CSS의 "Better"플로팅

Question

CSS와 float 속성을 실험하고 있습니다. 이 같은보고하려면 CSS있는 방법이 있나요

- 그래서 요소는 그들 위에 빈 공간을 사용할 수 있습니다 : 나는 80 픽셀 그리드 float: left에 정렬 된 div의 많은이 "웹 사이트"가 ? 그것이 가능하다면 자바 스크립트없이

.

고마워, 마틴.

Answer 1

는 CSS 옵션은 다음과 같습니다

• float:left, 이미 보았 듯이, 제한된 수평 타일링을 제공합니다.
• display:inline-block은 타일링이없는 float:left과 다른 결과를 제공합니다.
• CSS multi-column layout은 아직 완전히 정의되지 않았습니다. 암시 적 열로 수직 흐름을 지원하지만 타일링으로 적합하지는 않습니다.
• flexible box layout은 아직 제대로 지원되지 않습니다. 올바른 방향으로 나아가는 것처럼 느껴지지만 타일링으로 적합하지 않을 수도있는 수평 또는 수직 흐름 유형을 지원합니다.

요컨대, 완전히 정의되지 않은 CSS 표준조차도 이것을 지원하지 않는 것 같습니다. 그래서 먼 길일 수도 있습니다. 가장 간단한 폴백 옵션은 jQuery 플러그인을 사용하는 것이다.

Masonry (@Billy Moat 제안) 외에 다른 jQuery 플러그인은 Isotope 및 Tiles Gallery입니다. 석공 술이 가장 자주 언급되는 것 같습니다.

Answer 2

아니요, 이것은 CSS에서 수행 할 수 없습니다. 가장 좋은 방법은 석조 술이라는 자바 스크립트 항목을 사용하는 것입니다.

http://masonry.desandro.com/

Answer 3

는 px의 수는 1 개 블록의 공간이 50px를 채우려면 올라가라고 할 수 있습니다. margin-top: -50px;

그것은 마법이 아니며, 각 마법마다 그렇게하는 것이 조금 비쌉니다. 콘텐츠가 동적 인 경우이 방법은 효과가 없거나 여러 행과 모든 항목에서 올라야하는지 여부를 계산하려면 js가 필요합니다.

Answer 4

이 작업을 수행 할 수 있지만 CHE에서 말한 것처럼 콘텐츠가 동적 인 경우 최악의 경우 잘못 처리됩니다.

정적 사이트 인 경우이를 수행 할 수 있습니다.

이 문제를 해결하려면 블록 & 그룹으로 생각하고 각 블록 내부의 모든 블록을 다시 정렬하십시오. 수평 및 수직 동적 콘텐츠를 타일링