DIV_CSS レイアウトの問題: 左右に固定幅の 3 つの DIV が水平に配置され、中央の幅が自動的に埋められる_html/css_WEB-ITnose

フロントエンドの初心者として、これは私がフロントエンドのポジションの面接で尋ねた質問の 1 つでした。そのため、間違って質問してしまい、間違ってしまいました。

今日はそれについて真剣に考える時間がめったにありません。答えは必ずしも最適な解決策であるとは限りませんが、同じ効果を達成することができます。

問題の説明: 幅が不確かな DIV 内に 3 つの DIV を水平に並べて配置します。左右の DIV の幅は 200px に固定されており、中央の DIV が残りの幅を埋めます。

この質問は、私がその時最初に行った質問でした。質問を読んだ後、答えを書き出しました。float:left; だけの問題ではないでしょうか。 (実践は真の知識をもたらしますが、私は事実に負けました!)

筆記試験に提出したコード:

面接官の評価: このコードでは目標の効果は達成できません。

その時、彼は転送の問題をそれ以上追求しませんでした。その後、コンピューターでコードを実行してみたところ、結果は次のようになりました:

center が消えました!

それは確かに目的の効果ではありません!突然何が起こったのか分かりませんでした！しかし、面接官の評価は理解できます。「このコードでは目的の効果は得られません (HTML+CSS について十分に深く理解していないため)」。

でも、質問がとてもシンプルだったので、この結果を見て、自分でも知らず知らずのうちに面接官が仕組んだ罠に陥っていたことに気づきました。

インタビューからほぼ 5 か月が経ちましたが、プロジェクトで同様の問題に遭遇したとき、私はこの問題の解決策を真剣に探したことはありませんでしたが、中間 div を固定 div として扱うことしかできませんでした。いつも初心者であることを言い訳にして、多くの古典的な問題を解く機会を本当に逃していました。本題に戻りますが、これが必ずしも最善の解決策ではありませんが、目的の効果を達成できるコードは次のとおりです。は、この Extension 問題に関する 1 つの質問です。逆に、中央の div は固定されており、残りの幅は左右に均等に分割されます。

実際、上記の問題を解決することができます。この問題は非常にオープンであり、次のような多くの方法があります。教えてください！

著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。