ナビゲーション バーの項目を取得し、最後の行を除く各行をメニューのコンテナーの幅に引き伸ばすスクリプトを作成しています。プロセスは基本的に次のとおりです。
- メニュー コンテナの幅
を見つける - 各項目を反復処理し.outerWidth(true)、現在の行の幅を含む変数に を追加します
- 現在の行の幅がコンテナの幅以上になると、いくつかのテストを実行します-- 現在の行の幅から
減算.outerWidth(true)して追加します.innerWidth().
-- 行幅がまだコンテナ幅より大きい場合は、次の行配列に移動し、現在のアイテムを行の最初のアイテムとして追加します。
-- 行幅がコンテナ幅以下の場合は、 item を現在の行の最後の項目として、次の行配列に移動します。
行が作成されたら、コンテナーの幅と行の幅の差を見つけ、次の式に従って、各要素に追加するために必要なパディングを計算します。
this.addedPadding = Math.floor( this.difference / ( this.items.length * 2) );
次に、残りのスペースを次のように計算します。
this.leftovers = this.difference - (this.addedPadding * 2 * this.items.length);
次に、追加されたパディングを追加して、すべてのアイテムを反復処理します。次に を取りleftovers、下方向に 2 ずつ繰り返し、最初の要素の各辺に 1 ピクセルのパディングを追加し、次に 2 番目、3 番目と続き、leftovers1 または 0 になるまで繰り返します。1 に等しい場合は、1 ピクセルのパディングを of に追加しますpadding-right。行の最後の項目。
各行を繰り返し、プロセスを繰り返します。
問題は、ブラウザーによってフォントのレンダリングがわずかに異なるため、数値が常に完全に加算されるとは限らないことです。私の現在の解決策は、行が正しくレンダリングされるように、ブラウザーによる必要な調整によってコンテナーの幅を変更することです。これでは一貫した結果さえありません。たとえば、私が取り組んでいるサイトでは、Chrome で最初はホームページが正しく表示されませんが、(少なくとも私のコンピューターでは) 更新すると正しく表示されます。
ブラウザとコンテンツに基づいて containerWidth を変更することなく、これに対処する正しい方法は何でしょうか? 方法はありますか？
問題の例については、http://development.rjhallsted.com/login_system/browsing/projects/insidemt/にアクセスしてください。