均匀分布的图像网格答案

【问题标题】：Evenly spaced image grid均匀分布的图像网格
【发布时间】：2013-04-03 08:51:28
【问题描述】：

我已经浏览过这个网站，但还没有找到合适的解决方案。

我正在制作一个摄影网站，左侧有一个固定的菜单栏 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/，但是在 div 被放到下一行之前，边距太紧了。而且我不明白如何调整它们。

有什么帮助吗？

【问题讨论】：

标签： css layout grid thumbnails fluid

【解决方案1】：

当您计算适合的框数时，添加您想要的最小边距：

边距为像素

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设置边距，你可以在box类中设置width

.box {
    margin: 2%;

    /*

    or

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

    */
}

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

【讨论】：

好的，非常感谢！如何获得百分比作为保证金？那现在是像素不是吗？
因为如果我只是删除边距 JS 并将它们添加到 CSS 中，那么在某些屏幕尺寸的右侧会有太多空白空间：jsfiddle.net/VLr45/16
向 css 添加左边距和/或右边距没有帮助，因为边距随 js 更新。嗯...如果我只使用 css 边距，这可能需要两边都有一些 div 来使缩略图居中..
我用边距作为框宽度百分比的解决方案更新了答案。不知道这是不是你要找的...