Lassen Sie mich Ihnen zuerst die Renderings zeigen. Wenn Sie es für ziemlich gut halten, wenden Sie sich bitte an den Implementierungscode.
1. Festnummer pro Zeile: Stellen Sie die Ästhetik des Layouts sicher
.List li {width: 20%; Anzeige: Inline-Block;*Anzeige: Inline;*Zoom: 1; Überlauf: versteckt;}2. Passen Sie die Anzahl und Größe entsprechend der Seitenbreite an: Stellen Sie die Lesbarkeit von Bildern und Texten sicher
.List li {width: 20%; Anzeige: Inline-Block;*Anzeige: Inline;*Zoom: 1; Überlauf: versteckt;}1. Medienabfrage -Steuerbreite
@Media Screen und (max-Width: 1280px) {. List-table1 li {width: 25%}}@Media Screen und (max-Width: 600px) {. List-table1 li {Breite: 33,3%}}@Media Screen und (max-Width: 400px) {.Bequem, aber kompatibel
2. JS Kontrolle
$ (Fenster) .Resize (function () {Resizelist ();}) Funktion resizelist () {var s_width = $ (Fenster) .Width (); // console.log ("s_width:"+s_width); li "). li ").Anmerkungen:
1. Das Bild verformt sich nicht
.a-common {width: auto; Höhe: auto;}. a-common img {width: 100%; Höhe: auto;}2. Textüberlaufverarbeitung
.Title, .Subtitle {Breite: Auto; Text-Align: Mitte; Überlauf: versteckt; weißer Raum: Nowrap; Text-Overflow: Ellipsis;}Das obige ist das reaktionsschnelle Layout der vom Editor eingeführten JS -Implementierungsliste. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!