두 개의 기존 요소 사이에 n 개의 요소 배치 및 맞춤

Question

고정 너비가있는 두 요소가 있습니다 (% 단위).

첫번째 요소가 위치 left: 0 번째 요소 right: 0 위치;

필요성이 두 요소 사이의 N의 일부 구성 요소를 추가하기 때문에, 새로운 추가 요소는 각각 동일한 폭 (주요 요소 사이의 가능한 공간에 따라)를 갖는다.

http://jsfiddle.net/hXUyh/1/

문제

새로운 요소 (서로 교차 또는 사이에 여분의 공간을 떠나) NOT 정확하게 위치 및 NOT 지속적으로 다른 브라우저의 창 크기가된다는 점이다.

도와주세요.

는 난 단지 사용하는 다른 브라우저는 서로 다른 출력을 줄 것이라는 점을 이해하지만,이 스크립트는 구글 크롬으로 제한됩니다.

Answer 1

이 시도 :

$(document).ready(function() { 
    for (var i = 0; i < 9; i++) { 
     $('<div/>').appendTo('body') 
    } 
    $(window).resize(function() { 
     var firstWidth = $('#element-0').width(); 
     var r = ($(window).width() - (firstWidth * 2) - 2)/9; 
     $('div').slice(2, 11).each(function(i) { 
      $(this).css({ 
       left: i == 0 ? firstWidth : firstWidth + r * (i), 
       width: r 
      }) 
     }) 
    }).resize() 
});​ 

http://jsfiddle.net/yav9Q/

Answer 2

나는 너무 오래 전에 비슷한 요구 사항을 가지고 있었다. 질문이나 전략/코드를 변경하지 않고, 여기에 가깝게 보여주는 바이올린은 그것을 얻을 수 : http://jsfiddle.net/hXUyh/3/ (원래 코드는하지 않았다 나는이 크기 조정 음식을 장만하지 않습니다)

문제를 그 width() jquery 함수는 둥글게됩니다. 그래서 당신의 수학은 항상 조금 벗어날 것입니다. window.innerWidth에서 계산을 사용하여이 기능을 향상 시켰습니다. 부동 소수점 너비로 인해 약간 잘못 정렬됩니다. 픽셀 완벽한 정렬을 위해 부동 소수점 너비를 사용하는 것은 방법이 아닙니다.

완벽하게 정렬하려면 패딩을 사용하십시오. 다음은 가능한 가장 작은 패딩을 사용하는 예입니다. http://jsfiddle.net/hXUyh/8/ 테두리가 필요하지 않은 경우 수학이 훨씬 쉽습니다. 당신이 문제를보고 변경 스크립트마다 브라우저의 창 크기를 실행해야하므로