나란히 부동 소수점 높이 divs

Question

아래 그림에서 언급 한 바와 같이 부동 div를 만들려고합니다 (아래 링크에 업로드 됨), 모든 div를 나란히 이동시키기 위해 왼쪽 float을 사용하고 있습니다.

첫 번째 사진과 같은 다른 div에 영향을주지 않고 기본 div의,

우리는 높이가 확장 사업부를 클릭

이, 두 번째 사진에서 언급 한 세 번째 DIV 정확히 첫 번째 아래에 와야있다 우리가 두 번째 div를 클릭 할 때 두 번째 그림과 같은 세 번째 그림에서 언급했는데 네 번째 div는 아래로 떠 있어야하고 다른 div를 방해해서는 안됩니다. 첫 번째, 두 번째 및 세 번째 그림에는 네 개의 div가 있지만 div는 임의의 수입니다. 네 번째 사진에는 세 개의 div가 있으며 세 번째 div를 클릭하면 세 번째 div가 오른쪽으로 이동해야하며 다섯 개 또는 일곱 div가있는 경우 동일하게 발생해야합니다. 어떻게하면 CSS를 사용 하여이 작업을 수행 할 수 있습니까?

Answer 1

클릭 이벤트가 DIV의 크기를 늘리려면 Javascript/JQuery를 사용해야합니다. 나는 float을 추천하지 않습니다 - 여기에 인라인 블록을 사용하는 빠른 포인터가 있습니다. flexbox를 사용할 수는 있지만 지원해야하는 브라우저는 무엇입니까?

http://jsbin.com/domokefipi/1/edit