1140px網格對齊問題

嗨，我正在建立一個庫風格的網站，我非常感興趣的是從cssgrid.net使用1140px網格，因爲我覺得960px對於這個項目來說太小了。1140px網格對齊問題

我想在第一行中有三個圖像，每個圖像有四列，然後是其餘行下面的三列圖像。

問題是，一旦我這樣做，兩行的右邊不對齊，顯然畫廊看起來不太好。我知道這是由於在此網格中使用百分比構建的列四捨五入引起的。然而，它仍然看起來不好，我想讓它們以某種方式對齊。這有什麼解決辦法？

我的索引頁這裏代碼： http://pastebin.com/c76U7J5g

要看到這種情況出現，你必須下載cssgrid.net電網

enter image description here

2012-06-28 urok93

向我們展示一些代碼。 http://jsfiddle.net/ – sachleen

你可以發佈你現在使用的代碼嗎？沒有看到你當前的實現很難提供任何建議 – jackwanders

我只是從這個網格看默認代碼。如果你從CSSgrid.net下載並檢查列，你會明白我的意思。我還添加了我的特定index.html代碼，以便您可以更清楚地看到問題。 – urok93

如果我明白髮生了什麼，它似乎是一個簡單的錯誤。

您的佔位符圖像（貓）太小。在這個網格系統中使用佔位符圖片可能會很棘手，因爲您必須聲明您希望佔位符的大小。實際上，在您的實時頁面上，圖像不會指定尺寸，因爲它會破壞網格系統（網格會將圖像縮小到適合放入列的最大尺寸）。

長話短說，佔位符圖像太小！在他們的大小，他們不會填補網格點，因此造成你描述的奇怪的定位。話雖如此，我總是至少放置1000px的佔位符，以便它們可以正確縮小。

編輯：

嘗試做基金做什麼：

.last { 
float: right; 
}

是添加樣式表 - 它應該對準的最後一列的右邊緣。

2012-06-29 16:42:43 Connor

我不認爲是這種情況，因爲即使沒有佔位符，仍然存在這個問題，如上面截圖所示，從默認代碼中獲取。 – urok93

好吧，我現在看到你在說什麼，但是大約1-3px的錯誤對齊真的很重要嗎？ – Connor

就我而言，是的，因爲我正在建立一個畫廊網站，我希望第一行是三個更大的圖像，然後下一行是4個小圖像。對我來說差別很明顯，看起來不太好。 – urok93

基於百分比的佈局不是像素完美的。我在我的一個項目中使用了css框架http://www.1140px.com/，我很滿意。如果你想像素完美的佈局，你可以試試它。

2012-09-12 19:32:34 sudip

回答