仅使用css的网格库视图,具有相同的宽度不同的高度

时间:2014-09-22 11:47:16

标签: php html css

我正在处理图片库的网格视图

这是我到目前为止所做的,但有些照片之间仍然存在垂直空间 CSS:

#container{
    background-color:transparent;
    top: 60px;
    left:8%;
    height:100%;
    border:1px solid ;
    width: 82.19%;
    position:absolute; 
    outline: 0;
}

.box {
    background-color:#3e3e3e;
    border:1px solid #bebebe;
    margin: 6px 3.5px;
    width:362px;
    display:block;
    float:left;
    border-radius:3.6px;
}
.box:nth-child(2n + 0) {
    float: right;
}

我如何应用它:

<div id='container'>
<?php

(some php & mysql here)

echo "<div class='box'><img src='pictures/$image' width='360' ></div>";
</div>

?>

我无法找出合适的css来创建没有额外垂直空间的网格视图。

图像有不同的高度固定宽度,我说话的空间是不让网格结构正确形成垂直距离的空间b / w有些照片比它应该更多

有没有人可以帮助我?

注意:不建议任何我想使用纯css的jquery插件

0 个答案:

没有答案