2

私は最近、CSSを学ぶ旅を始め、Gmailがどのように機能するかについて常に興味を持っていたので、Gmailのデザインを研究してきました。

私が理解できないように思われる問題の1つは、Gmailが絶対に配置されたdivを取得して、まだフローの一部であるかのように動作させる方法です。これが私が参照しているdivです：

ここに画像の説明を入力してください

そのdivの計算されたスタイルは次のとおりです。 ここに画像の説明を入力してください

問題は、ブラウザの幅が狭くなると、この絶対位置にあるdivがその左側の検索フォームと重なると思います。代わりに、それがまだフローの一部であるかのように検索フォームを圧縮しているように見えます。検索フォームとその周辺の他の要素をチェックして、重複を妨げている可能性のある余白やパディングを確認しましたが、訓練を受けていない目では何も見つかりませんでした。

より経験豊富なCSSとGmailユーザーがGmailDOMツリーを見て、これを私に説明してくれることを願っています。乾杯！

4

1 に答える 1

2

そのためにjavascriptを使用できます。ウィンドウオブジェクトのサイズ変更イベントにバインドし、ブラウザのサイズが変更されたときに要素を再計算して再配置できます。

プレーンJavaScriptの場合：

window.onresize = function(event) {
    // recalculate
};

jQueryの場合：

$(window).resize(function(event) {
    // recalculate
});

もう1つのオプションは、絶対位置の要素を囲むコンテナに対して相対的な位置を設定することです。その相対コンテナがブラウザウィンドウでサイズ変更されると、その中の絶対コンテナも一緒に移動します。

于 2012-04-18T00:03:03.577 に答える