水平等於空間未知數量的圖像

Question

然而，許多點被添加，我希望它們在一條線上平均間隔，而不是越過線的寬度。 這是我到目前爲止，哪些工作正常，直到太多的圖像被添加，然後他們去。

var count = $('#dots img').length; 
var dotW = $('.dot').width(); 
var line = $('#line').width(); 

var x = count * dotW; 
var y = line - x; 
var z = y/(count + 1); 

$('.dot').css('margin-left', z); 

查看jsfiddle。 http://jsfiddle.net/kirkr/2L9eg/ 複製並粘貼圖片標籤以測試更多。

我錯過了什麼？

謝謝。

Answer 1

在頁面加載每個「點」後，只需應用具有所需屬性（可能爲頁邊距）的CSS類。 IE：

$(document).ready(function() { 
    $(".dot").css("margin-right","10px"); 
}); 

Answer 2

你的計算是好的，它是HTML中的空白空間比預期的更多。

Here's a version without whitespace between theimg tags。

Answer 3

你的問題是圖像之間的空白。使用這個CSS：

#dots { 
    font-size: 0; 
} 

它工作正常。

編輯：

與它有點繞播放。如果需要，您可以用圖像替換div。確保從圖像中刪除儘可能多的空白。

http://jsfiddle.net/2L9eg/6/