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
Artikel empfehlen
Implementierung des Scroll-Snap-Scroll-Ereignisstopps und der Elementpositionserkennung in CSS
1. Scroll Snap ist eine unverzichtbare Fähigkeit ...
Lösen Sie das Problem, dass ifconfig und addr die IP-Adresse in Linux nicht sehen können
1. Installieren Sie das Linux-System auf der virt...
So aktivieren Sie den Fernzugriff in Docker
Docker-Daemon-Socket Der Docker-Daemon kann über ...
MySQL-Transaktions-Tutorial Yii2.0 Händler-Auszahlungsfunktion
Vorwort Ich bin ein PHP-Programmierer, der als Pr...
HTML-Tag Marquee realisiert verschiedene Scroll-Effekte (ohne JS-Steuerung)
Der automatische Bildlaufeffekt der Seite kann du...
Mehrere Möglichkeiten zum Ausblenden von HTML-Elementen
1. CSS verwenden Code kopieren Der Code lautet wie...
So berechnen Sie den Wert von ken_len im MySQL-Abfrageplan
Die Bedeutung von key_len In MySQL können Sie „ex...
Detaillierte Erklärung der JavaScript-Array-Deduplizierung
Inhaltsverzeichnis 1. Array-Deduplizierung 2. Ded...
Eine kurze Erläuterung zur Lösung des Depends_on-Reihenfolgeproblems in Docker-Compose
Die Verwendung von depends_on zum Sortieren von C...
Schritte zum Upgrade von CentOS6 auf Glibc
Inhaltsverzeichnis Hintergrund Kompilieren Sie gl...
Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)
Vorwort Bei der Entwicklung eines Projekts stieß ...
Lösung für MySql-Fehler 1698 (28000)
1. Problembeschreibung: MysqlERROR1698 (28000)-Lö...
Detaillierte Erläuterung der globalen Parameterpersistenz in den neuen Funktionen von MySQL 8
Inhaltsverzeichnis Vorwort Persistenz globaler Pa...
So schreiben Sie mit nodejs ein Tool zur Generierung von Entitätsklassen für Datentabellen für C#
Obwohl Microsoft T4-Vorlagen bereitstellt, finde ...
Einige Einstellungen von Div bezüglich Rahmen und Transparenz
rahmen: Stil = „Rahmenstil: durchgezogen; Rahmenbr...