4

4行に収まるフローティングdivの配列があります。それらの幅と右マージンの合計は 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 に答える