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

【问题标题】：How can I make the bottom margin of a div equal to its percentage-calculated right margin?如何使 div 的下边距等于其百分比计算的右边距？
【发布时间】：2012-12-26 17:46:19
【问题描述】：

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

【问题讨论】：

你的意思是，右边距的值（以像素为单位）并将其应用到底部？

标签： jquery html css margin

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这里没有理由使用 JavaScript。 margin-right: 2% 和 margin-bottom: 2% 的值相同。（即“20.5667px”）
@KevinBoucher 我什至没有尝试这个，因为我假设 margin-bottom 检测到页面高度的 2%。你的建议奏效了！请问为什么margin-bottom上的2%仍然是由宽度而不是高度决定的？
我的印象是 margin-bottom 没有考虑到这一点。每天学习一些东西。

【解决方案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/

【讨论】：