2016-11-16 6 views
1

내 포트폴리오를 만들 때 문제가 발생했습니다 ... 범주별로 프로젝트를 필터링하기 위해 동위 원소 필터를 사용하여 완료됩니다.Div 요소가 포트폴리오에서 중복됩니다.

첫 번째로드 중에 포트폴리오의 요소가 4 개의 열로 구성된 격자 대신 배치됩니다.

카테고리를 모두 선택한 후에 코드가 스캔되었지만 오류가 발생한 위치를 찾을 수 없습니다. 코드에 액세스하기 위해 여기에 관련 페이지의 a link이 임시로 무료 호스팅됩니다.

줄리안

+0

을, 첫 번째로드에 올바르게 나타납니다 4x4x3를 ... 그리고 나는 어떤 중복 안녕하세요, 이 주셔서 감사합니다 – Anfuca

+0

볼 수 있습니다 빠른 답변. 문제는 Chrome에서만 발생하는 것 같습니다.이 브라우저에서 사용해 볼 수 있습니까? – Jutssr

+0

좋아, 알 겠어 ... 아마도 완전히 동봉되지 않은 이미지와 관련이있어 동위 원소가 자체 계산을 할 시간이 없다 ... 이 솔루션을 사용해보십시오 http://stackoverflow.com/a/19235772/2990234 – Anfuca

답변

0

나는 어쩌면 다른 사람이 거기에 동조 할 수 있습니다 동위 원소 필터링에 익숙하지있어 사전에 감사합니다.

하지만 상자가 겹치는 이유는 절대 위치 지정을 사용하기 때문입니다. 절대 위치 지정을 사용하면 요소를 사용하는 요소가 문서 플로우에서 제거되므로 다른 요소를 고려하지 않아도됩니다.

첫 번째 행의 상자에는 두 번째 행에 0, 18, 세 번째 행에 36의 상단 위치가 있습니다.

플로트 및 정적/상대 위치 지정을 살펴 보거나 이미 Flexbox에 대해 배우기 시작할 수 있습니다 (awesome browser support이 시작됨). 또한, 가까운 장래에 우리는이 목적을 위해 CSS 그리드를 사용할 수 있습니다. 하지만이 글을 쓰는 지금은 not an effective solution입니다.

0

또한 flexbox가 해결책이라고 생각합니다. 현재 인 flexbox에 대한 자세한 학습/읽을 수 있습니다 : 나는 그것을 시도했습니다 http://flexboxgrid.com/