可変高さの左浮動divタグを使用して素敵でスケーラブルな行を作成する

私は素敵な、きちんとした、テーブルの列に一連の要素を表示したい。各要素は幅が設定されますが、高さは可変です(要素内のコンテンツによって自動的に決定されます)。それぞれはfloat:leftに割り当てられます。幅:x;ここで、xはすべての要素について同じ値です。私が今得ている結果は、要素の前の行に、次の要素よりも背の高い要素がある場合、divは次の行の先頭に移動しないということです。ここで何が起きているのですか(Div 7がどのように左に浮かんでいるかに注目してください)。

enter image description here

私が欲しいのは次のようなものです:

enter image description here

すべての要素がラップして素敵な行を作る方法に注目してください。

私はテーブルでこれを達成することができましたが、ブラウザのサイズに応じて要素を拡大することができます(ブラウザが広い場合は4つの要素の行、幅が狭い場合は2つの要素の行など)。テーブルはそれを防ぐだろう。選択的にクリアを設定する:左;上記の規模を許容しない。

私はJavascriptソリューション(jQueryが優先)または他の "ハック"を開いているので、すばらしい行が得られます。

ありがとう!

0
石積みをご覧ください。それはいくつかの非常にクールなものです(確かにそれがあなたが欲しいものであるかどうかは分かりません)。
追加された 著者 Christian Varga,
注:私は、Div 4が動作する方法にエラーがあることに気付きました(Div 2の下にあります)。 。 。その部分を正しく図表化しても、同じ問題が発生することはありますが、無視してください。
追加された 著者 user636044,

1 答え

私はあなたがちょうど種類の秋になるだろう自分のdivの各 "行"をカプセル化すると考えています。行divsは、次の行が前の行が終了する前に開始しないことを保証する、最大の項目の高さまで増加します。

0
追加された
彼は「テーブルは、
追加された 著者 Moak,
行ごとに可変数の要素が必要な場合は、OPで表を使用してそれを達成できるかどうかについてのあなたの記述は真実ではありません。わかりやすくするために削除する必要があります。
追加された 著者 steveax,
ソリューションに感謝します。 (私が言う限りでは)ブラウザウィンドウのサイズを変更すると、ページ幅に合わせてすべてをリフローさせるのではなく、行ごとに一定数の要素が詰まることになります。
追加された 著者 user636044,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript