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

我有一个适合4行的浮动div的数组。它们的宽度和右边距合计达到100％。然而，他们的底部利润率是静态的。下面的CSS：如何让div的下边距等于百分比计算的右边距？

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

有没有一种方法来检索右边距的值，并将其应用到下边距，使他们始终保持一致？

这里是什么，我有一个例子：http://jsfiddle.net/kVZMU/

来源

2013-01-12 user1549522

所以你的意思是，右边缘的像素值，并将其应用到的底部？ – Leeish

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

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

来源

2013-01-12 04:09:58

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

通过JavaScript，让你的右页边距，并设置为下边距。 http://jsfiddle.net/cxn9E/

来源

2013-01-12 04:13:11 Leeish

没有理由在这里使用JavaScript。 “margin-right：2％'和'margin-bottom：2％'的值是相同的。（即'20 .5667px'） –

所以很烦人会使事情不必要地复杂化...... – lekroif

@KevinBoucher我甚至没有尝试这个，因为我认为margin-bottom检测到页面高度的2％。你的建议奏效了！请问为什么边缘底部的2％仍然由宽度而不是高度决定？ – user1549522

使用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-12 04:19:25

** + 1 **优秀的答案！ – arttronics

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

回答

相关问题