Die Lösung für die Webtabelle oder Div-Ebene, die bei der Produktion von Webseiten_HTML/Xhtml_Webseiten gestreckt wird

Wenn wir Webseiten entwerfen, stoßen wir immer auf einige unangenehme Dinge. Am häufigsten kommt es vor, dass die angezeigte Seite nach dem Hinzufügen von Inhalten im Hintergrund gestreckt wird, was dazu führt, dass die Webseite äußerst unansehnlich wird. In der Vergangenheit hat grundsätzlich jeder Tabellen entworfen, und heutzutage gibt es auch div. CSS-Standarddesigns, und es ist selten, dass man entsprechende gute Methoden findet, um Tabellen zu verhindern Fassen Sie es zusammen und teilen Sie es mit allen.
1. Stellen Sie die Bildgröße direkt auf der Webseite ein, z. B. mit dem Code: Obwohl dies die Bildgröße einschränken kann, müssen Sie die Bildgröße vor dem Hochladen des Bildes manuell ändern deformiert.
2. Verwenden Sie den folgenden Code:
Diese Methode wird beim Aufrufen des Bildes automatisch auf die angegebene Breite verkleinert. Dadurch wird das Bild nicht verformt und die Tabelle wird nicht geplatzt Während des Bild-Download-Vorgangs wird das Bild zunächst in seiner Originalgröße angezeigt. Wenn das Bild vollständig ist, platzt es angezeigt wird, wird das Bild automatisch wieder verkleinert.
3. Wir können die Größe der Tabellenattribute begrenzen, um zu verhindern, dass sie gestreckt werden. Fügen Sie beispielsweise den Code „style="table-layout:fixed;word-wrap:break-word;word-break;break" hinzu „in -all;““, wobei „table-layout:fixed;“ dazu dient, das Tabellenlayout zu korrigieren, wodurch effektiv verhindert werden kann, dass die Tabelle gestreckt wird, und „word-wrap:break-word;“ dazu dient Steuerzeilenumbrüche, d. h. Zeilenumbrüche erzwingen. Dies muss verwendet werden, wenn viel Textinhalt vorhanden ist, insbesondere wenn keine Zeilenumbrüche durchgeführt werden -all;“ kann IE lösen. Das Problem besteht darin, dass der Rahmen durch englische (nicht-asiatische Textzeilen) gestreckt wird, aber kein Zeilenumbruch erzwungen wird und der Inhalt nur innerhalb der Breite der Tabelle angezeigt wird. Unter normalen Umständen verwenden Sie einfach „style="table-layout:fixed;word-wrap:break-word;"“. Natürlich kann die oben aufgerufene Anweisung in CSS definiert werden, z
Tabelle {
table-layout: behoben;
word-wrap:break-word;
}
4. Verwenden Sie CSS, um die adaptive Größe von Bildern zu steuern. Der Code lautet wie folgt:
img {
max-width: 600px;
width:expression(this.width > 600 ? "600px" : this.width);
overflow:hidden;
}
Unter ihnen beträgt die maximale Breite 600 Pixel. In IE7, FireFox und anderen Nicht-IE-Browsern beträgt die maximale Breite 600 Pixel 600 Pixel, wenn die Bildgröße größer als 600 Pixel ist, wird sie automatisch auf 600 Pixel reduziert, was in IE6 gültig ist; Tabelle, die dadurch verursacht wurde, dass die Bildgröße nicht kontrolliert werden konnte.
5. Fassen Sie abschließend die praktischsten Codes zusammen:
Wenn es sich um ein Formular handelt, verwenden Sie bitte:
Tabelle {
Tabellenlayout: behoben;
Wortumbruch: alle umbrechen;
}
Wenn es sich um eine Div-Ebene handelt, verwenden Sie bitte:

div {
Tabellenlayout: behoben;
Wortumbruch: Wortumbruch;
Breite: plus Breite;
Überlauf: ausgeblendet; (Das Extra wird nicht angezeigt.)
}