javascript - 具有自动填充的图像网格

Question

我正在创建一个图像网格，其中有一个 slider 可以更改图像本身的大小。

看例子: http://jsfiddle.net/9Tce5/1/

我的问题是，当竞争者的宽度(以红色表示)不够大，无法在不留下空白区域的情况下填充该行(如示例中所示)。

我想要实现的是适合 li 元素，以绿色表示，以便它适合整行，直到移动 slider 并且图像变大或变小。简而言之，我希望整个原料都充满绿色。

这是我的CSS:

ul {
    width:410px;
    background-color:red;
    height:100%;
    display:table;
    padding:0;
}
li {
    list-style-type: none;
    float: left;
    margin:5px;
    padding: 5px;
    background-color:green;
}
.image {
    width: 100px;
    height: 75px;
    display: block;
    background-color: blue;
}

我可以像这样用 javascript 解决这个问题，但是没有更酷的/CSS 方法吗？

var ul_width = $('ul').width();
var li_width = $('li').first().outerWidth()+2;
var modulo = Math.floor(ul_width/li_width)

var padding = (ul_width-(li_width*modulo))/modulo/2
$('li').css('padding',padding);

Answer 1

您设置边距和填充，但您也可以设置宽度和 margin:auto 到子元素: DEMO

ul {
    width:410px;
    background-color:red;
    height:100%;
    display:table;
    padding:0;
}
li {
    list-style-type: none;
    float: left;
    margin:5px 0.8%;
    padding: 4% 0.8%;
    background-color:green;
    width:30%;
}
.image, .title {
    width: 100px;
    margin:auto;
    display: block;
}
.image {
    height: 75px;
    background-color: blue;
}

---

要完全隐藏红色 background:重置 margin 和 li 的 width。 <强> DEMO

li {
    list-style-type: none;
    float: left;
    margin:0;
    padding: 4% 1%;
    background-color:green;
    width:31.3%;
}