左浮動小数点divの間の動的マージン（またはマージンのシミュレーション）

左に浮動小数点数があります。ブラウザのサイズが変更されると、その行に収まる人の数に基づいて下または上に移動します。私は動的に（CSSで）それらのdivsを整列させる（または余裕を持って）方法があるかどうか、彼らはmarhinのサイズを変更することによって、常に画面全体を満たすでしょうかと思っていましたか？言い換えれば、ブラウザのサイズを変更している間にマージンがリサイズされますが、別のdivが収まるとすぐにラインに追加されます。ここで私は左浮動小数点divの間の動的マージン（またはマージンのシミュレーション）

<html> 
<head> 
<style> 
.test { 
float:left; 
width: 100px; 
height:100px; 
background-color: grey; 
margin: 0 10px 10px 0; 
} 
</style> 
</head> 
<body> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
</body> 
</html>

出典

2010-12-30 BugBusterX

私はあなたができることを知っている限り、これは単純にできないことができますjesseから理解しているサイズや位置を調整するためにあなたのニーズに合っていないものを使用して – Breezer

を「埋める」にしたいと彼の残りのスペースを見てwondowのサイズを変更し、私はこの質問を数回見てきたし、結果は常にそのCSSのdoesnのようです、それは今どのように例を示します動的な幅に渡って要素の分布をサポートしています（まだ）。そこにハックがありますが、正直言って私はこれを取り巻く最も速い方法は、位置づけのためにjavascriptを使うことだと信じています。

（prototypeライブラリで書かれた）このようなものは、あなたが欲しいものを行う必要があります。

$(document).observe('dom:loaded',function(){ 
    spaceSquares(); 
}); 
window.onresize = function(){spaceSquares();} 
function spaceSquares(){ 
    // this is the minimum margin per square. 
    var minMargin = 20; 
    // this tells you how many squares will fit on the top row 
    var topRowSquares = Math.floor(document.viewport.getWidth()/($$('.test')[0].getWidth()+minMargin)); 
    // this will tell you how much space is left over 
    var remainderWidth = document.viewport.getWidth() - (($$('.test')[0].getWidth()+minMargin)*topRowSquares); 
    // this will tell you how much margin to put on each item 
    var marginWidth = (remainderWidth/topRowSquares) + minMargin; 
    // this will put the margin on the top row 
    for(var i=0;i<topRowSquares;i++){ 
     $$('.test')[i].setStyle({'margin-left':marginWidth/2+'px','margin-right':marginWidth/2+'px'}); 
    } 
}

が、私はそれを行うにはよりエレガントな方法があります確信しているが、基本的に私はちょうど残りのスペースを計算していますし、それを四角形で分割します。私は最初の呼び出しをラウンドしてオブザーバでDOMがロードされる前に起動しないようにし、window.onresizeイベントで呼び出しているので、ウィンドウのサイズを変更すると一番上の行は常に完全に分散しています。

うまくいけば、あなたは正しい方向に向かうでしょう。

出典

2010-12-30 07:50:32 Jesse

左浮動小数点divの間の動的マージン（またはマージンのシミュレーション）

答えて

関連する問題