在網格佈局中排列圖像

我有一組縮略圖圖像顯示在div中。 div的寬度可以根據屏幕大小而變化。圖像全部爲固定大小150px * 150px，填充爲5px。我希望這些縮略圖圖像以網格佈局排列，並且我希望這些圖像相對於外部div中心對齊。我可以嘗試text-align: center在外部股利。在網格佈局中排列圖像

但是這樣最後一行中的圖像會出現在中心，我希望它們從左邊排列。所以我想到了在放置圖像後計算可用空間，並將padding-left (=freespace/2)應用於外部div，以使內容看起來居中對齊。

這是我用過的代碼。

CSS

#outer { 
    border: 1px solid; 
    resize: horizontal; 
    overflow: auto; 
    width: 700px; 
    padding: 0; 
} 

.inner { 
    width: 150px; 
    height: 150px; 
    background: #ccc; 
    padding: 5px; 
    display: inline-block; 
}

jQuery的

$(document).ready(function() { 
    $("#position").click(function() { 
     var maxCount = Math.floor($("#outer").outerWidth()/$(".inner").outerWidth()); 
     console.log("maxcount::" + maxCount); 
     var freeSpace = $("#outer").outerWidth() - ($(".inner").outerWidth() * maxCount); 
     console.log("freeSpace::" + freeSpace); 
     $("#outer").css("padding-left", freeSpace/2); 
    }); 

    $("#text").toggle(function() { 
     $("#outer").css("text-align","center"); 
    },function(){ 
     $("#outer").css("text-align","left"); 
    }); 
});

HTML

<button id="position"> 
    Adjust position 
</button> 
<button id="text"> 
    Toggle text align 
</button> 
<div id="outer"> 
    <div class="inner"></div> 
    <div class="inner"></div> 
    <div class="inner"></div> 
    <div class="inner"></div> 
    <div class="inner"></div> 
    <div class="inner"></div> 
    <div class="inner"></div> 
</div>

一個here演示 - http://jsfiddle.net/userdude/fzjrm/1/

但是，這不工作，因爲我的預期，因爲內容不完全中心對齊。可能是邏輯需要一些調整，我無法弄清楚。

來源

2012-08-25 user700284

這三個的jsfiddle的左上角，右上角，和左下角的正方形是爲了讓你的網頁的不同部分;例如，右上角是一個''元素包裝，左上角是頭部CSS，右下角是頭部Javascript。 –

是的。我知道這一點。但我覺得粘貼整個代碼可以讓人們更容易複製代碼並在本地測試它:) :) – user700284

不要這樣做;沒有人會這樣做，你或多或少會「打破」jsFiddle的工作方式（因爲你在文檔中有完整的文檔）。更不用提你用無關標記混淆你的問題。換句話說，你有一個包含jQuery的腳本，並且jsFiddle插入了MooTools。以正確的方式使用它。 ';）' –

起初我會建議你計算maxCount在一般使用時，如果$("#outer").innerWidth()你還集裝箱的填充，可以只使用元素的內部。

最後以你的問題的解決方案，我可以建議你到

box-sizing: border-box; 
-moz-box-sizing: border-box;

添加到#outer div來維持其寬度。不幸的是，這並不如我所期望的那樣，從側面看比從左側有更多的空間。但還有另一個奇怪的東西，我不明白，divs之間的空白（請參見截圖），我無法找到影響這些部分的CSS。我認爲這些空間正在影響計算，這就是爲什麼我會比我們需要多一點left-padding。

這裏是jsFiddle link

enter image description here

來源

2012-08-28 15:21:59 haynar

感謝那個指針。 :) :) ..我已經忽略了內部div的邊緣，因爲我需要margin.It實際上是通過顯示內嵌塊的style.So引入的，所以我試着在這個URL中指定的字體大小的修復 - http：// css -tricks.com/fighting-the-space-between-inline-block-elements/，然後添加我自己的保證金。然後，爲了計算，我使用了outerWidth（true）將邊距包含在寬度計算中。現在問題已修復。這裏是工作小提琴。 - http://jsfiddle.net/fzjrm/10/ ..感謝很多..沒有你的幫助，我不會在這個方向前進.. – user700284

我很高興，這有助於你:) – haynar

在這裏你去：http://jsfiddle.net/dan_barzilay/fy494/

我做了什麼，而不是改變#outer填充左freeSpace/2並只從左側我通過freeSpace/4改變都padding-right和padding-left增加尺寸以保持圖像中心。

$("#outer").css({"padding-left": freeSpace/4, "padding-right": freeSpace/4});

來源

2012-08-28 14:50:00

我沒有看到你的結果和問題 – haynar

problam之間的任何區別：「但這不是我所期望的，因爲內容不是完美的中心對齊。這正是我所修正的... –

我知道這個問題，我的意思是說這並不能解決問題，因爲在我的FF和Chrome上，網格仍然不居中 – haynar

在網格佈局中排列圖像

回答

相關問題