CSS에서 동적 열과 행 수와 함께 부유 요소를 균등하게 분배하는 방법은 무엇입니까?

Question

나는 고정 된 너비와 높이를 가진 div가 여러 개 있습니다 (기사 사진이있는 일종의 카탈로그보기를 생각해보십시오). 이제 나는 float : left의 동작과 유사하게 보여주고 싶습니다. 이렇게하면 브라우저 창이 커질수록 더 많은 div가 한 행에 표시됩니다.

부동 소수점의 단점은 왼쪽에있는 해결책은 다른 div가 맞을 때까지 오른쪽에 커다란 흰색 틈이 있다는 것입니다. 이제 div를 페이지 하나에 균등하게 분배하는 작업이 있으며 오른쪽에 큰 흰색 틈 대신 단일 div간에 균등하게 틈이 분산되어야합니다. http://dl.dropbox.com/u/2719942/css/columns.html

브라우저 창 크기를 조정하면 당신은 볼 수가 떠 유사한 동작 :

자바 스크립트의 해결책은 간단 남아 있지만, 공간이 고르게 상자 사이에 분배된다. 열과 행 수는 JavaScript로 동적으로 계산됩니다.

function updateLayout() { 
    var boxes = document.getElementsByClassName('box'); 
    var boxWidth = boxes[0].clientWidth; 
    var boxHeight = boxes[0].clientHeight; 
    var parentWidth = boxes[0].parentElement.clientWidth; 

    // Calculate how many boxes can fit into one row 
    var columns = Math.floor(parentWidth/boxWidth); 

    // Calculate the space to distribute the boxes evenly 
    var space = (parentWidth - (boxWidth * columns))/columns; 

    // Now let's reorder the boxes to their new positions 
    var col = 0; 
    var row = 0; 
    for (var i = 0; i < boxes.length; i++) { 
     boxes[i].style.left = (col * (boxWidth + space)) + "px"; 
     boxes[i].style.top = (row * boxHeight) + "px"; 

     if (++col >= columns) { 
     col = 0; 
     row++; 
     } 
    } 
    } 

JavaScript가없는 솔루션이 있는지 궁금합니다. 한 페이지에 수백 개의 div가 있기 때문에 CSS 전용 솔루션을 선호합니다.

나는 CSS3 Flexible Box Layout을 들여다 보았지만 고정 열 레이아웃에만 유용 할 것으로 보인다. 필자의 예에서는 열 개수가 동적으로 계산됩니다. 그런 다음 비슷한 작업을 수행 할 수있는 CSS3 Multi-column Layout을 시도했지만 div가 세로로 정렬되어 내부가 잘리고 브라우저 지원이 아직 없습니다. 이것은 텍스트에 더 유용하게 보이지만 제 경우에는 차단하지 말아야 할 그림으로 div를 수정했습니다.

내 질문은 : JavaScript없이 이것을 실현할 수 있습니까?

Answer 1

가장 가까운 순수 CSS 솔루션은 text-align: justify을 기반으로합니다.

• Fluid width with equally spaced DIVs
• How to set auto-margin boxes in flexible-width design using CSS?

여기 당신의 HTML/CSS를 사용하여 데모입니다 :

여기 기법을 보여주는 내 대답의 두 가지 http://jsfiddle.net/thirtydot/5CJ5e/ (또는 fullscreen)

이있다 diff가있는 경우 JavaScript와 CSS가 마지막 행을 처리하는 방식의 차이 다른 행과 비교하여 많은 수의 상자가 있습니다.

내 CSS이 수행합니다 :

귀하의 자바 스크립트이 수행

는 CSS가 마지막 행에 상자의 다른 번호로 무엇을 받아 들일 경우

, 너 수 행을 완료하려면 추가 보이지 않는 상자를 추가하십시오 :

http://jsfiddle.net/thirtydot/5CJ5e/1/ (또는 fullscreen)

이렇게하면 보이지 않는 상자가 포함 된 요소의 높이가 증가한다는 문제가 있습니다.이 문제가 있다면, 좀 자바 스크립트를 사용하지 않고 문제를 해결할 수있는 방법을 생각할 수 없다 : 자바 스크립트가 현재 사용하고 있기 때문에

http://jsfiddle.net/thirtydot/5CJ5e/2/ (또는 fullscreen) 물론

을, 당신 수도뿐만 아니라 눈에 보이지 않는 상자의 아이디어를 가져 전에, 이전 버전에서 이에 대한

http://jsfiddle.net/thirtydot/5CJ5e/5/ (또는 fullscreen)

_{(I also wrote a more complicated JavaScript fix : (대신 HTML을 sullying의) 처음에 눈에 보이지 않는 상자를 추가하는 데 사용할나에게. 지금 내 오래된 픽스를 사용해야 할 이유가 없어야합니다.)}

Answer 2

이렇게하려면 자바 스크립트를 사용해야합니다.

하지만 상자 클래스를 조정하면 모든 상자의 여백을 한 번에 조정할 수 있습니다.

// Calculate how many boxes can fit into one row 
var columns = Math.floor(parentWidth/boxWidth); 

// Calculate the space to distribute the boxes evenly 
var space = (parentWidth - (boxWidth * columns))/columns; 

$('.boxClass').css('margin', space/2); 

-

예 : http://jsfiddle.net/VLr45/1/

Answer 3

그래서 내 질문은 : 나는 자바 스크립트없이 이런 일을 실현 할 수 있습니까?

나는 최근에 같은 운동을했고 결국에는 JavaScript를 포기하고 사용했습니다. IE 7과 8 (실용적이지 않음)을 포기하더라도 순수한 CSS 솔루션을 찾을 수 없었습니다. 제한된 방식으로이를 수행하기 위해 긴 미디어 쿼리 목록을 해킹 할 수 있습니다.

나는 내 자신의 코드를 사용하여 거친 예를 등 폭, 높이, 비례 스케일링, 최대 폭, 스크롤, 일관성있는 마진과 패딩을 처리하는 작은 (약 1K 축소 된) 라이브러리, 여기

를 기입이 결국 : http://jsfiddle.net/CmZju/2/. 나는이 예제에 몇 백 개의 엘리먼트를 배치했다.

CSS 전용 솔루션이 더 좋을 것입니다. 왜냐하면 한 페이지에 div35 개가 최대 개까지있을 가능성이 높기 때문입니다.

브라우저의 레이아웃 엔진은 사용자가 수행 한 것과 동일한 (또는 비슷한) 계산을 수행해야합니다. 필자는 매우 최적화되었지만 몇 가지 오래된 PC와 몇 가지 모바일 장치에서 JS 솔루션을 테스트 한 후에 너무 느리게 테스트했습니다.

절대 위치 지정을 사용하는 것처럼 보입니다. 나의 비공식적 인 테스트는 절대 레이아웃이 플로트 계산보다 훨씬 빠르다는 것을 보여줍니다. 이는 특정 크기의 특정 위치에 요소를 그리는 것보다 브라우저가 상대적으로 크기가 크고 떠 다니는 항목을 계산하기 위해 수행해야하는 작업에 대해 생각할 때 의미가 있습니다.

성능 최적화를 실제로보고 싶다면 눈에 보이는 콘텐츠 만 조작 할 수 있습니다. 이것은 일 것입니다.은 모든 것의 크기를 조정하는 것보다 어렵고 아마 페이지에 수천 개의 항목이있는 경우에만 관련이 있습니다.

스크립트 경로를 마치면 jQuery Masonry에서 추가 아이디어를 얻을 수 있습니다. 나는 그것에 대해 좋은 것을 듣고 내 자신의 도서관에 좋은 아이디어를 주었다.

Answer 4

아마도 MASONRY은 배치에 도움이 될 수 있습니까?