Web ページ作成時に Web テーブルまたは div レイヤーが引き伸ばされる場合の解決策_HTML/Xhtml_Web ページ制作

Web ページをデザインするときに、必ず不快な出来事に遭遇します。最も一般的なのは、背景にコンテンツを追加した後に表示されるページが引き伸ばされてしまい、Web ページが非常に見苦しくなってしまうことです。以前は、誰もが基本的にテーブルを設計していましたが、インターネット上には当然多くの解決策がありました。現在では、div CSS の標準設計もあり、関連する優れた方法を見つけることはめったにありません。Xiaoxiang Online は、テーブルを防ぐ良い方法を見つけました。それを要約してみんなで共有します。
1. Web ページで画像サイズを直接設定します (コード など)。これにより画像サイズが制限される可能性がありますが、画像をアップロードする前に画像サイズを手動で変更する必要があります。そうしないと、アップロードされた画像が変更されます。変形した。
2. 次のコードを使用します:
このメソッドは、画像を呼び出すときに指定された幅まで自動的に縮小します。画像が変形したり、テーブルが破裂したりすることはありません。ただし、画像が大きすぎる場合は、画像が変形しないという欠点があります。画像のダウンロード プロセス中、つまり画像の表示プロセス中に、画像は最初は元のサイズで表示されます。次に、画像が完全に表示されると、ページが見にくくなります。と表示されると、画像は自動的に再び縮小されます。
3. テーブル属性のサイズを制限して、拡張されないようにすることができます。たとえば、コード「style="table-layout:fixed;word-wrap:break-word;word-break;break」を追加します。 " in -all;""、ここで、「table-layout:fixed;」はテーブルのレイアウトを修正し、テーブルが引き伸ばされるのを効果的に防ぐことができ、「word-wrap:break-word;」はテーブルのレイアウトを修正することを意味します。改行の制御、つまり強制改行は、テキスト コンテンツが多い場合、特に改行が実行されない場合、表が引き伸ばされてしまいます。 -all;" で IE を解決できる 問題は、英語 (非アジア言語のテキスト行) によってフレームが引き伸ばされてしまうことですが、強制的に改行されることはなく、表の幅内にコンテンツが表示されるだけです。通常の状況では、「style="table-layout:fixed;word-wrap:break-word;"」を使用してください。もちろん、上記で呼び出されたステートメントは、次のように CSS で定義できます。
table {
テーブルレイアウト: 固定;
ワードラップ:ブレイクワード;
}
4. CSS を使用して画像の適応サイズを制御します。 コードは次のとおりです。
img {
最大幅: 600px;
width:expression(this.width > 600 ? "600px" : this.width);
overflow:hidden;
}
このうち、max-width: 600px; IE7、FireFox およびその他の非 IE ブラウザでは、最大幅は 600px ですが、IE6 では無効です。 600px、画像サイズが 600px より大きい場合は、IE6 で有効な 600px に自動的に縮小されます。overflow:hidden は、画像の広がりや変形を避けるために、設定されたサイズを超える部分を非表示にすることを意味します。画像サイズの制御に失敗したために発生したテーブル。
5. 最後に、最も実用的なコードをまとめます。
フォームの場合は、以下を使用してください:
テーブル {
テーブル レイアウト: 固定;
単語区切り: ブレークオール;
}
div レイヤーの場合は、以下を使用してください:

div {
table-layout:fixed;
word-wrap:break-word;
width:plus width;
overflow:hidden; (余分な部分は表示されないようにします。)
}