divはダイナミックなので、高さが異なるため、私のページに複数の動的左揃えdivがあります。 div間の空きスペースを管理したいCSSやJavaScriptでどうやってやるか教えてください。 これは石造レイアウトと呼ばれるdiv間のスペースを管理する(動的高さ、浮動小数点型)
0
A
答えて
1
(それだけで説明のためである)画像の下を参照してください。フレックスボックスまたは列のレイアウトを見てみてください。ここではいくつかの例は以下のとおりです。
1
一つの方法は次のとおりです。次の3つのコラムを行うと、列ごとに、すべての第三のdivを追加することができます。
第2の方法は、「Masonry.js」です。私は頻繁に使用します。 http://masonry.desandro.com/ その簡単なので、私はそれをお勧め:
HTML:
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item grid-item--width2">...</div>
<div class="grid-item">...</div>
</div>
CSS:
.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }
jqueryの:最後のブロックは、次に行きます
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});
関連する問題
- 1. MySqlの浮動小数点浮動小数点データ型
- 2. Bigquery - 浮動小数点型を浮動小数点型にキャストする方法
- 3. 浮動小数点型の浮動小数点数を使用している浮動小数点数は、浮動小数点数の上位16桁です。
- 4. 浮動小数点型2の浮動小数点型の妥当性チェック
- 5. CSS:浮動小数点のdivの高さは
- 6. 同じ高さの浮動小数点型
- 7. 2桁の浮動小数点スペース
- 8. 浮動小数点型の浮動小数点ポストがポストボックス外に出る
- 9. 浮動小数点数型のC++での浮動小数点問題
- 10. 浮動小数点型浮動小数点表示が消える
- 11. IE浮動小数点型DIVの消えるバグのバグ
- 12. 左浮動小数点divの間の動的マージン(またはマージンのシミュレーション)
- 13. 浮動小数点数を持つ2つのdiv間のギャップ
- 14. 浮動小数点型の浮動小数点型の浮動小数点型(浮動小数点型)の対応方法を教えてください。子要素を側面に突出させる方法
- 15. 浮動小数点数は浮動小数点数ですか?
- 16. なぜ浮動小数点型の浮動小数点型は、正常に動作しないのですか?
- 17. horzontallyの浮動小数点div
- 18. 浮動小数点divの整列
- 19. ファイアウォールのCSSナビゲーションdiv浮動小数点
- 20. 外側divを浮動小数点数と同じ高さにする
- 21. 浮動小数点浮動小数点浮動小数点浮動小数点数 - 浮動小数点数を持つ2つの要素:左に動くようにdivを配置する右のスタイル
- 22. CSSが浮動小数点浮動小数点を返す
- 23. 変数の浮動小数点浮動小数点
- 24. 浮動小数点データ型の混乱
- 25. SSEとのiostream:浮動小数点型
- 26. 浮動小数点型の精度printf
- 27. 浮動小数点型の問題
- 28. 高速浮動小数点修飾子
- 29. SSE 2以上 - 浮動小数点データ型に浮動小数点数が2つしかない理由
- 30. 浮動小数点数浮動小数点数値
? – Mahi
を次の行に移動します。 – bhupesh
Javascriptでこれを行うにはどうしたらいいですか? JavaScriptを(CSSとは違って)**が文字通り**できることを考えると、ページで欲しいものは私には見えますが、問題はあなたがしたいことを知らないだけです... – 6502