Question

我一直在这个网站上，但还没有找到合适的解决方案。

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

任何帮助？

Answer 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设置保证金，可以在width类中设置box

.box {
    margin: 2%;

    /*

    or

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

    */
}

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

均匀间隔的图像网格

1 个答案: