4

我有一个浮动 div 数组，适合 4 行。它们的宽度和右边距加起来为 100%。然而，它们的底边距是静态的。下面的CSS：

.item {
    position: relative;
    float: left;
    height: 200px;
    width: 23%;
    margin-right: 2%;
    margin-bottom: 15px;
    background-color: #ddd;
}

有没有办法检索右边距的值并将其应用于下边距，以便它们始终保持一致？

这是我所拥有的一个示例：http: //jsfiddle.net/kVZMU/

4

3 回答 3

2

为什么不使用margin-bottom: 2%？

小提琴：http: //jsfiddle.net/kboucher/uVfRL/

于 2013-01-12T04:09:58.853 回答
1 
$('.item').each(function(){
    var val = $(this).css('margin-right');
    $(this).css('margin-bottom', val);  
});

通过javascript，获取右边距并将其设置为下边距。 http://jsfiddle.net/cxn9E/

于 2013-01-12T04:13:11.650 回答
1

使用 jquery，您可以设置相对于右边距的下边距。将其设置为准备好文档并调整窗口大小，使其始终保持一致。

试试这个

var setMargin=function(){
    var divItems=$('div.item');
    var marginRight=divItems.css('margin-right');
    divItems.css('margin-bottom',marginRight)
    }
$(document).ready(function(e) {
setMargin();
$(window).resize(function(e) {
   setMargin(); 
});
});

检查http://jsfiddle.net/kVZMU/2/

于 2013-01-12T04:19:25.533 回答