CSS : div 요소 재정렬

이지만 height이 다른 여러 개의 <div> 태그가 있습니다. 브라우저가 resized 및 <div> 일 때 요소가 재 배열 될 때 사이에 많은 공백이 생깁니다. 예를 들어 다음과 같은 HTML : 브라우저 크기를 조정할 때 CSS : div 요소 재정렬

<div class="wrap"> 
    <div class="box"> 
     This has less height 
    </div> 
    <div class="box"> 
     This has more height 
    </div> 
    <div class="box"> 
     This has less height. 
    </div> 
</div>

지금, 마지막 DIV가 처음 DIV 아래 왼쪽으로 이동하지만, 중간 DIV 더 높이를 가지고 있기 때문에 그들 사이에 빈 공간이있다. 이미지를 보시기 바랍니다.

enter image description here 순수 CSS를 사용하여 div를 정렬 할 수 있습니까? 방법을 찾을 수 없어, 그래서 난 괜찮아요 jQuery masonry plugin,하지만 문제가 자주 (예를 들어, 처음에는 페이지를 열 때 레이아웃이 완전히 엉망입니다 공감하지 않는 시도했지만, 만약 당신이 새로 고침 Logged 괜찮아지는 페이지). 그래서 단지 CSS와의 수없는 경우

, 그것은 (? jQuery를 사용하여 예를 들어 전용) 복잡한 플러그인없이 작동

jsFiddle을 할 수있는 방법이있다 : 수행 할 수 있습니다 http://jsfiddle.net/HS2Zh/

출처

2012-09-05 user1251698

이 코드

 var h = 0; $('.box').each(function() { h = Math.max(h, $(this).height()); }).height(h);

그것은 고유의 높이 (.box의 최대 높이)를 할당됩니다를 사용하여이를 제거 할 수있는 방법은 크기 조정에 div의 배열 하시겠습니까? 새로운 너비에 따라 초기 위치 또는 리플 로우 상태를 유지 하시겠습니까? 리플 로우 (reflow)를 원한다면 플로트가 발생하는 잘 알려진 부작용을 줄 수있는 유일한 CSS 방법입니다. – Yoeri

예, 리플 로우하고 싶지만 위의 예와 같이 빈 공간을 제거하고 싶습니다. CSS를 사용할 수 없다면 간단한 jQuery 방법이 있나요? – user1251698

벽돌을 사용하고 Ajax 등으로 많은 내용을로드하는 경우 문서 준비가 아닌 창로드시 간단하게 트리지를 트리거 할 수 있습니다. 또는 콘텐츠가로드 된 후 Masonry의 #container를 퇴색시킬 수 있습니다. 귀하의 jsfiddle은 즉시 로딩되므로 언제 어떻게 왜 일어나는 일을보기 위해 온라인 샌드 박스를 봐야합니다. – Systembolaget

당신의 퀘스트가 격차를 제거하는 경우, 모든 .box 클래스

출처

2012-09-05 09:59:04 Hearaman

이것은 문제를 해결하지 못합니다. 이것은 더 작은 div 높이를 더 큰 div와 같게 만들 것입니다. 어쨌든 공간이있을 것입니다 (이제 공간은 더 작은 div의 일부가 될 것입니다). – user1251698

jquery masonry 플러그인을 사용합니다. 이미 플러그인을 사용하여 다음 여유 공간을 가진되도록 흐름 블록 사이에 약간의 간격을 제공하려고하는 경우이 링크는 당신에게 http://masonry.desandro.com/

희망이 도움 주변

출처

2012-09-05 09:57:18 Sowmya

OP는 이미'masonry' 플러그인을 사용합니다 –

CSS : div 요소 재정렬

답변

관련 문제