Question

我有一个浮动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/

Answer 1

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

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

Answer 2

$('.item').each(function(){
    var val = $(this).css('margin-right');
    $(this).css('margin-bottom', val);  
});

通过javascript，获得正确的保证金并将其设置为底部保证金。 http://jsfiddle.net/cxn9E/

Answer 3

使用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/

如何使div的下边距等于其百分比计算的右边距？

3 个答案: