1. ホーム
  2. 質問と答え
  3. 浮動小数点の要素（高さが異なる）を行に整理する方法（JavaScriptを使用）

浮動小数点の要素（高さが異なる）を行に整理する方法（JavaScriptを使用）

2011-12-27 4 views
1

ブロック要素のリストがあります。すべてのブロック要素には高さがあります（変化します）。私は行にブロック要素を整理したいと思います。浮動小数点の要素（高さが異なる）を行に整理する方法（JavaScriptを使用）

最初の試みは、すべての要素を反復し、その高さを最も重い要素の1つに設定することでした。しかし、常に1つの要素が他の要素よりもはるかに重くなるため、行間にギャップが生じます。

私は同じことをしたいと思いますが、行を検出してそれに応じて高さを設定します。しかし、私は浮動要素のを返しますelement.getComputedStyle('left')として問題を抱えています。

私が使用できる他の機能（YUIを使用していますが、それは問題ではありません）ですか？あるいは、別のアプローチを完全に使用しますか？

出典

2011-12-27 Almad

+0

：

HTML：

<div class="row"> <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div> <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div> <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div> <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div> </div> <div class="row"> <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div> <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div> <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div> <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div> </div>

CSS

.row div { display:table-cell; width:25%; }

リンクjsFiddleにしますギャップを取り除くために固定高さの要素...あなたはh ttp：//masonry.desandro.com/demos/basic-single-column.html？ –

+1

David Desandroは、jQueryを必要としないフレームワークにとらわれないフレームワークのバージョンを作った：https://github.com/desandro/vanilla-masonry。私はゆっくりとYUI3のポートで作業しています。終了したら、YUI Galleryで公開します – juandopazo

答えて

関連する問題

 関連する問題