2

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

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

有什么帮助吗？

4

1 回答 1

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/

于 2013-04-11T08:35:01.993 回答