간격을 남기지 않고 div 정렬

Question

페이지에 간격을 두지 않고 div 요소의 크기를 조정할 수있는 방법이 있습니까? 유일한 대안은 발생 가능한 틈새를 계산하고 주변 요소를 이동하는 것입니다. 미리 감사드립니다.

Example - (Please click on the cards in order to resize)

Answer 1

가 온 클릭하면 절대로 카드의 DIV의 위치를 ​​변경하고 Z- 인덱스를 증가시킬 수있다 (단지 div 요소의 크기를 조정하지 않음) 다시 모든 카드를 다시 정렬하는 것입니다 다른 모든 카드보다 위에 표시됩니다. 카드의 절대 위치로 전환 할 때 상대 위치로 경계를 잠그기 위해 각 카드 주위에 다른 래퍼 div를 만들 것을 제안합니다.

이 솔루션을 사용하면 현재 선택된 카드를 제외한 모든 카드의 위치를 ​​유지할 수 있습니다.

Answer 2

가장 간단한 해결책은

Answer 3

클릭 이벤트를 처리하고 모든 div를 플로팅 했으므로 위치 자체가 문제를 해결하지 못합니다. 대신 모든 카드 배열을 만들고 click 이벤트에서 선택한 카드를 제거하고 카드 크기가있는 4 개의 빈 div (카드와 같은 클래스)를 추가하십시오. 확장 된 카드로 덮인 장소에 올려 놓으십시오. 펼쳐진 카드는 절대 위치가되고 빈 div 만 숨기고 나머지 카드는 정렬 된 상태로 유지됩니다 (부유 때문에). 카드를 접을 때 배열과 html 마크 업에서이 div를 제거하면됩니다.