問題タブ [equal-heights]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - javascriptを使用せずにフレックス行の各アイテムを正方形(高さと同じ幅)のままにする方法
これらの文字を一列に並べて、各文字 div の高さと幅を同じにしたいと思います。これは私の問題の mvp ですhttps://codepen.io/danielyaa5/pen/BZRVyo
これは私が見たいものです。https://codepen.io/danielyaa5/pen/XgRYbE div の高さと幅が同じであることに注意してください。ここでは、高さと幅を手動で 50px に設定していますが、実際のシナリオでは、画面サイズのパーセントに動的に設定されるため、幅はわかりません。JavaScript ソリューションを作成することはできましたが、実際のアプリでは読み込み時間が大幅に増加しました。
MVP
html - 絶対配置コンテナー内のフレックス列の高さが等しい
コードペンはこちら: https://codepen.io/anon/pen/MvqWwg
私は絶対に位置付けdiv.container
ました。div.wrapper
その中。および のフレックス列としての 2 つの div div.wrapper
。これらの列には背景があります。
これらの背景を、コンテナーの目に見える高さだけでなく、最も長い列の最後に移動する (つまり、それらを同じ高さにする) にはどうすればよいですか? position: absolute
から削除できませんdiv.container
。
これは HTML コードです。
これはCSSです: