Die Lösung für das Problem, dass die Webtabelle oder die Div-Ebene in der Webseite gestreckt ist

<br />Beim Gestalten von Webseiten stoßen wir immer auf einige unangenehme Dinge. Am häufigsten stellen wir fest, dass nach dem Hinzufügen von Inhalten im Hintergrund die angezeigte Seite gestreckt wird, was die Webseite äußerst unansehnlich macht. Früher hat jeder im Grunde Tabellen entworfen, und natürlich gab es im Internet viele Lösungen. Heutzutage gibt es auch Div-CSS-Standarddesign, und es ist selten, entsprechende gute Methoden zu sehen. Jetzt fasst Xiaoxiang Online die gefundenen guten Methoden zusammen, um das Strecken von Tabellen zu verhindern, und teilt sie mit allen.
1. Stellen Sie die Bildgröße direkt auf der Webseite ein, z. B. mit dem Code: <img src="https://www.jb51.net/images/jb51com.jpg" width="600" height="500" border="0">. Dies kann zwar die Bildgröße einschränken, Sie müssen die Bildgröße jedoch vor dem Hochladen des Bildes manuell ändern, da das hochgeladene Bild sonst verformt wird.
2. Verwenden Sie den folgenden Code: <img src="https://www.jb51.net/images/jb51com.jpg" onload="javascript:if(this.width>600}{this.resized=true;this.style.width=600;}">
Diese Methode verkleinert das Bild beim Aufrufen des Bildes automatisch auf die angegebene Breite, wodurch das Bild nicht verformt wird und die Tabelle nicht beschädigt wird. Der Nachteil besteht jedoch darin, dass das Bild, wenn es zu groß ist, während des Bilddownloadvorgangs, d. h. während des Bildanzeigevorgangs, in seiner Originalgröße angezeigt wird. Zu diesem Zeitpunkt wird die Tabelle beschädigt und die Seite wird hässlich. Zweitens wird das Bild automatisch wieder verkleinert, wenn es vollständig angezeigt wird.
3. Wir können die Größe der Tabelle basierend auf ihren Attributen begrenzen, um zu verhindern, dass sie gestreckt wird. Beispielsweise können wir den Code „style=“table-layout:fixed;word-wrap:break-word;word-break;break-all;““ in <table width=“600“ border=“0“ cellpadding=“0“ cellspacing=“0“> einfügen, wobei „table-layout:fixed;“ das Tabellenlayout fixiert, wodurch effektiv verhindert werden kann, dass die Tabelle gestreckt wird. „word-wrap:break-word;“ dient zur Steuerung von Zeilenumbrüchen, d. h. zum Erzwingen von Zeilenumbrüchen. Dies ist erforderlich, wenn viel Textinhalt vorhanden ist, insbesondere wenn sich Inhalte wiederholen. Wenn keine Zeilenumbrüche durchgeführt werden, wird die Tabelle gestreckt. „word-break: break-all;“ kann das Problem lösen, dass der Rahmen des IE durch Englisch (Textzeilen in nicht-asiatischen Sprachen) gestreckt wird, erzwingt jedoch keine Zeilenumbrüche und zeigt nur den Inhalt innerhalb der Tabellenbreite an. Verwenden Sie im Allgemeinen einfach „style="table-layout:fixed;word-wrap:break-word;"“. Natürlich kann die obige Anweisung auch in CSS definiert werden, wie zum Beispiel
Tisch {
Tabellenlayout: behoben;
Zeilenumbruch: Wortumbruch;
}
4. Verwenden Sie CSS, um die adaptive Größe des Bildes zu steuern. Der Code lautet wie folgt:
img {
maximale Breite: 600px;
Breite:Ausdruck(diese.Breite > 600 ? "600px" : diese.Breite);
Überlauf: versteckt;
}
Darunter bedeutet max-width:600px, dass die maximale Breite in IE7, FireFox und anderen Nicht-IE-Browsern 600 Pixel beträgt, in IE6 jedoch ungültig ist; width:600px; die Bildgröße beträgt in allen Browsern 600 Pixel, und wenn die Bildgröße 600 Pixel überschreitet, wird sie automatisch auf 600 Pixel reduziert, was in IE6 gültig ist; und overflow:hidden; bedeutet, den Teil auszublenden, der die festgelegte Größe überschreitet, um eine Verformung der Tabelle zu vermeiden, die durch eine fehlende Kontrolle der Bildgröße verursacht wird.
5. Lassen Sie uns abschließend den praktischsten Code zusammenfassen:
Wenn es eine Tabelle ist, verwenden Sie bitte:
Tisch {
Tabellenlayout: behoben;
Wörtertrennung: alles trennen;
}
Wenn es eine Div-Ebene ist, verwenden Sie bitte:

div {
Tabellenlayout: behoben;
Zeilenumbruch: Wort umbrechen;
Breite: Breite hinzufügen;
Überlauf: versteckt; (den zusätzlichen Inhalt unsichtbar machen.)
}

<<: So aktualisieren Sie v-for in Vue

>>: Detaillierte Erklärung zur Installation von Redis im Docker und zum Starten als Konfigurationsdatei

So berechnen Sie den Wert von ken_len im MySQL-Abfrageplan

Die Lösung für das Problem, dass die Webtabelle oder die Div-Ebene in der Webseite gestreckt ist

So berechnen Sie den Wert von ken_len im MySQL-Abfrageplan

Ein Leitfaden zur Optimierung leistungsstarker Websites

CSS-Klicks auf das Radio wechseln zwischen zwei Bildstilen und nur eines der mehreren Radios kann aktiviert werden

Ein praktischer Bericht über die Prüfung und Bearbeitung doppelter MySQL-Datensätze vor Ort

Mysql Workbench - Abfragemethode für MySQL-Datenbanken

Vue-Element el-transfer fügt Drag-Funktion hinzu

Detaillierte Erläuterung zum Ausführen von JMeter unter einem Linux-System und zur Optimierung des lokalen Speichers

Ein kurzer Vortrag über die Kenntnisse, die Sie für den Einstieg in Vue beherrschen müssen

Schnellstart der Vue3-Dokumentation

Ursachen und Lösungen für MySQL-Datenverlust

Artikel empfehlen

MySql 5.7.20 Installation und Konfiguration von Daten- und my.ini-Dateien

So erstellen Sie schnell ELK basierend auf Docker

Linux verwendet if, um zu bestimmen, ob ein Verzeichnis existiert.

Verwenden Sie JS zum Vergrößern und Verkleinern, wenn Sie die Maus auf das Bild bewegen

Vue implementiert den automatischen Sprung zur Anmeldeseite, wenn das Token abläuft

Verwenden Sie einfaches jQuery + CSS, um einen benutzerdefinierten Tooltip für Tag-Titel zu erstellen

JS realisiert einfachen Bildkarusselleffekt

Analyse der Nutzung des Xmeter API-Schnittstellentesttools

Lernen Sie, benutzerdefinierte Hooks in React zu erstellen

Detaillierte Erklärung zum Anpassen des Stils von CSS-Bildlaufleisten

Beispiel für den Export und Import von Docker-Containern

JS, CSS und HTML zur Implementierung der Registrierungsseite

So speichern Sie Text und Bilder in MySQL

So ändern Sie den Speicherort von Datendateien in CentOS6.7 mysql5.6.33

Foreman Ubuntu16 Schnellinstallation