均勻間隔的圖像網格

我已經遍佈這個網站，但還沒有找到像樣的解決方案。均勻間隔的圖像網格

我正在製作一個攝影網站，左側有一個固定的菜單欄div，右側有內容div。在照片庫頁面中應該有一個帶有流體邊距的圖像縮略圖網格，以便縮略圖總是在整個右側（內容）div上均勻分佈。

這裏的結構：

<body> 
<div id="wrapper"> 
<div id="left_column"> 
<div class="navigation"></div> 
</div> 
<div id="right_column"> 

    <div id="thumb_container" class="grayscale"> 
    <a href="#"><div id="thumb_fx" ></div></a> 
    <img src="images/testimg.jpg" width="240" height="187" /> 
    </div> 
... 
    <div id="thumb_container" class="grayscale"> 
    <a href="#"><div id="thumb_fx" ></div></a> 
    <img src="images/testimg.jpg" width="240" height="187" /> 
    </div> 

</div> 
</div> 
</body>

^還有一個小插曲側翻在每個縮略圖動畫。

而CSS：

html { 
height: 100%; 
padding:0; 
margin:0; 
} 

body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

#wrapper { 
    float: left; 
    height: 100%; 
    width:100%; 
    padding:0; 
    margin:0; 
} 

#left_column { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    z-index:100; 
    width: 240px; 
    height: 100%; 
    overflow: hidden; 
    background-color:#ff0000; 
} 

#right_column { 
background-color:#cccccc; 
width:auto; 
height:100%; 
    margin-left: 240px; 
    position: absolute; 
} 

#thumb_container { 
    position: relative; 
    max-width:50%; 
    min-width:240px; 
    height:auto; 
    border-color:#000000; 
    display: inline-block; 
    margin: 2%; 
} 



#thumb_fx { 
    opacity: 1; 
    filter: alpha(opacity=100); 
    -webkit-transition: opacity 0.5s linear; 
    transition: 0.5s; 
    -moz-transition: 0.5s; /* Firefox 4 */ 

    z-index: 100; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: transparent; 
    box-shadow:inset 0px 0px 85px rgba(0,0,0,1); 
    -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,1); 
    -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,1); 
} 

#thumb_fx:hover { 
    opacity: 0; 
    filter: alpha(opacity=0); 
    -webkit-transition: opacity 0.5s linear; 
    transition: 0.5s; 
    -moz-transition: 0.5s; /* Firefox 4 */ 
} 



.grayscale img{ 
    max-width:100%; 
    min-width:50%; 
    height:auto; 
    position: relative; 
    border:none; 
    z-index: -1; 
    position: relative; 
}

迄今爲止最好的解決辦法是這樣的：http://jsfiddle.net/VLr45/1/但利潤去滴水不漏前格下降到下一行。我不明白如何調整它們。

任何幫助？

來源

2013-04-11 user2264516

當你計算的，將適合箱子的數量，增加你想的最低保證金：

保證金爲像素

var boxMinMargin = 10; // 10px 

var columns = Math.floor(parent/(box + boxMinMargin));

http://jsfiddle.net/VLr45/14/

保證金爲％

var boxMinMargin = box * 0.1; // 10% of box 

var columns = Math.floor(parent/(box + boxMinMargin));

http://jsfiddle.net/VLr45/24/

如果你喜歡使用CSS的保證金，你可以設置width你box類

.box { 
    margin: 2%; 

    /* 

    or 

    margin-top: 2%; 
    margin-right: 3%; 
    margin-bottom: 4%; 
    margin-left: 5%;  

    */ 
}

http://jsfiddle.net/VLr45/17/

來源

2013-04-11 08:35:01 Johan

好了十分感謝！我怎樣才能得到百分比作爲保證金？那現在是不是像素？ – user2264516 2013-04-11 08:55:31

因爲如果我只是刪除邊距，通過JS並將它們添加到CSS在某些屏幕尺寸右邊太多的空白空間：http://jsfiddle.net/VLr45/16/ – user2264516 2013-04-11 09:16:15

添加左邊距和/或右邊距到CSS沒有幫助，因爲保證金更新與JS。嗯...也許這需要一些divs，以雙方爲中心的縮略圖，如果我只使用css marginins .. – user2264516 2013-04-11 09:39:38

均勻間隔的圖像網格

回答

相關問題