如何讓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的下邊距等於百分比計算的右邊距？

回答

相關問題