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
Detaillierte Erklärung, ob die MySQL-Datenbank Fremdschlüsseleinschränkungen verwenden soll
1. Einleitung Das Thema, ob Fremdschlüsseleinschr...
CSS-Position feste linke und rechte Doppelpositionierungs-Implementierungscode
CSS-Position Das Positionsattribut gibt den Posit...
Lösung für das Problem des Datenverlusts bei Verwendung der Ersetzungsoperation in MySQL
Vorwort Die Entwickler des Unternehmens verwendet...
So betten Sie Dateien im Flash-Videoformat (FLV, SWF) in HTML-Dateien ein
Flash-Dateiformate: .FLV und .SWF Für das Flash-Vi...
So fügen Sie einem Benutzer in einer Linux-Umgebung Sudo-Berechtigungen hinzu
sudo-Konfigurationsdatei Die Standardkonfiguratio...
Detaillierte Erläuterung der FTP-Serverkonfiguration und 425-Fehler- und TLS-Warnlösungen für FileZilla Server
123WORDPRESS.COM stellt Ihnen den FileZilla-Downl...
Lösung für das Problem des Informationsverlusts mit "_" im Header bei Verwendung des Nginx-Proxys
Vorwort Bei der Entwicklung eines Gateway-Projekt...
Lösung für den 1045-Fehler in der MySQL-Datenbank
Wie löst man das Problem 1045, wenn die lokale Da...
Das WeChat-Applet implementiert das Schlangenspiel
In diesem Artikel wird der spezifische Code des W...
CSS3 verwendet var()- und calc()-Funktionen, um Animationseffekte zu erzielen
Wissenspunkte in der Vorschau anzeigen. Animation...
CSS3 Flex-Layout Justify-Content:Space-Between Die letzte Zeile wird linksbündig ausgerichtet
Bei Verwendung des Layouts justify-content:space-...
Beispiel für eine automatische Importmethode für allgemeine Vue3.0-Komponenten
1. Voraussetzungen Wir verwenden zum Importieren ...
Beheben von Problemen beim Importieren und Exportieren von Mysql
Hintergrund Da ich alle meine Aufgaben auf Docker...
Lösen Sie das Problem der unsicheren Docker x509-Registrierung
Nach der Installation von Docker trat beim Versuc...
Analyse allgemeiner Grundvorgänge der MySQL-Datenbank [Datenbank erstellen, anzeigen, ändern und löschen]
In diesem Artikel werden anhand von Beispielen di...