我正在创建一个图像网格,其中有一个 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);
最佳答案
您设置边距和填充,但您也可以设置宽度和 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%;
}
关于javascript - 具有自动填充的图像网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23253564/